Verstehen Sie die Rolle von Benutzeragenten-Stylesheets

Question

Ich arbeite an der Seite in Google Chrome. Die folgenden Stile werden korrekt angezeigt.

table {
    Anzeige: Tisch;
    Grenzkollaps: getrennt;
    Randabstand: 2px;
    Randfarbe: grau;
}

Beachten Sie, dass ich diese Stile nicht definiert habe. In den Chrome Developer Tools wird der CSS-Dateiname durch User Agent Stylesheet ersetzt.

Wenn ich nun das Formular absende und einige Validierungsfehler auftreten, erhalte ich das folgende Stylesheet:

table {
    Leerraum: normal;
    Zeilenhöhe: normal;
    Schriftstärke: normal;
    Schriftgröße: mittel;
    Schriftartvariante: normal;
    Schriftstil: normal;
    Farbe: -webkit-text;
    text-align: -webkit-auto;
}

Tisch {
    Anzeige: Tisch;
    Grenzkollaps: getrennt;
    Randabstand: 2px;
    Randfarbe: grau;
}

Die font-size in diesen neuen Stilen stört mein Design. Gibt es eine Möglichkeit, wenn möglich zu erzwingen, dass mein Stylesheet das Standard-Stylesheet von Chrome vollständig überschreibt?

Answer 1

如果您的 HTML 内容中缺少 ，您可能会遇到浏览器优先考虑“用户代理样式表”而不是您的自定义样式表的情况。添加文档类型可以解决此问题。

Answer 2

目标浏览器是什么？不同的浏览器设置不同的默认 CSS 规则。尝试添加 CSS 重置，例如 meyerweb CSS 重置 或 normalize.css，删除这些默认值。谷歌“CSS重置与正常化”以查看差异。