Was ist ein User-Agent-Stylesheet?

Question

Ich arbeite gerade an einer Webseite in Google Chrome. Sie wird mit den folgenden Stilen korrekt angezeigt.

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

Es ist wichtig zu beachten, dass ich diese Stile nicht definiert habe. In den Chrome-Entwicklertools heißt es User-Agent-Stylesheet anstelle des CSS-Dateinamens.

Wenn ich nun ein Formular abschicke und ein Validierungsfehler auftritt, erhalte ich das folgende Stylesheet:

table {
    white-space: normal;
    line-height: normal;
    font-weight: normal;
    font-size: medium;
    font-variant: normal;
    font-style: normal;
    color: -webkit-text;
    text-align: -webkit-auto;
}

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

En font-size von diesen neuen Stilen stört mein Design. Gibt es eine Möglichkeit, meine Stylesheets zu erzwingen und, wenn möglich, das Standard-Stylesheet von Chrome vollständig zu überschreiben?

Answer 1

Jeder Browser bietet ein Standard-Stylesheet, das so genannte User-Agent-Stylesheet, für den Fall, dass in einer HTML-Datei kein Stylesheet angegeben ist. Von Ihnen angegebene Stile setzen die Standardwerte außer Kraft.

Da Sie keine Werte für den Rahmen des Tabellenelements angegeben haben, wurden die Standardstile angewendet.

Answer 2

Ich bin auf das gleiche Problem gestoßen, weil ich mit nicht-semantischem HTML gearbeitet habe.

<!--incorrect-->
<ul class="my-custom-font">
  <button>
    <a>user agent styles applied instead of my-custom-font</a>
  <button>
</ul>

<!--correct-->
<ul class="my-custom-font">
  <li>
    <a>now inherits from from my-custom-font</a>
  </li>
</ul>

Sobald der HTML-Code aktualisiert wurde, wurden die Stile korrekt angewendet.

Answer 3

• Jeder Browser verfügt über eine Rendering-Engine, die für die Umwandlung von HTML-Dokumenten in Webseiten zuständig ist.
• Die Rendering-Engine hat ein eigenes Stylesheet für alle HTML-Elemente, eine Art Standard-Stylesheet für alle HTML-Elemente, und dieses Stylesheet wird User-Agent-Stylesheet genannt.
• Die Regeln des User-Agent-Stylesheets können vom Autoren-Stylesheet überschrieben werden.
• Die Rendering-Engine für den Google Chrome-Browser heißt . Und wenn Sie sich den Quellcode ansehen, finden Sie das Standard-Stylesheet.

Prüfen Sie dies https://www.linkedin.com/posts/smruti-sagar-pattanaik-a3a000195_html-css-chrome-activity-7027888128115847168-USil?utm_source=share&utm_medium=member_desktop

Answer 4

Ich habe eine Lösung. Sehen Sie sich das an:

Fehler

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

Richtig

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">

Answer 5

Fügen Sie den folgenden Code in Ihre CSS-Datei ein:

table {
    font-size: inherit;
}