639 Stimmen

Was ist ein User-Agent-Stylesheet?

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?

40voto

Ebrahim Byagowi Punkte 8964

Beantwortung der Frage im Titel: Was ist das User-Agent-Stylesheet, der Satz von Standard-Styles im Browser: Hier sind einige von ihnen:

Persönliche Meinung: Streiten Sie nicht mit ihnen. Sie haben gute Standardwerte, z.B. in rtl/bidi Fällen und sind heutzutage konsistent. Setzen Sie zurück, was für Sie irrelevant ist, nicht alles auf einmal.

15voto

BenM Punkte 51500

Definieren Sie die Werte, die nicht vom User-Agent-Stil von Chrome in Ihrem eigenen CSS-Inhalt verwendet werden sollen.

4voto

rollin_jeksun Punkte 41

Einige Browser verwenden ihre eigene Methode zum Lesen von .css-Dateien. Das ist also der richtige Weg, um dies zu umgehen: Wenn Sie die Befehlszeile direkt in den .html-Quellcode eingeben, ist das besser als die .css-Datei. Auf diese Weise haben Sie dem Browser direkt gesagt, was er tun soll, und der Browser ist in der Lage, die Befehle aus der .css-Datei nicht zu lesen. Denken Sie daran, dass die in der .html-Datei geschriebenen Befehle stärker sind als die Befehle in der .css-Datei.

3voto

Appy Sharma Punkte 144

Ich hatte das gleiche Problem, da bei einem meiner <div> der Rand vom Browser festgelegt wurde. Es war ziemlich ärgerlich, aber dann habe ich herausgefunden, wie die meisten der Menschen gesagt, es ist ein Markup-Fehler.

Ich ging zurück und überprüfte meinen <head> Abschnitt und mein CSS-Link war wie unten:

<link rel="stylesheet" href="ex.css">

I enthalten type und machte es wie unten:

<link rel="stylesheet" type="text/css" href="ex.css">

Mein Problem war gelöst.

2voto

Brent Miller Punkte 53

Ich wollte nur auf die Antwort von @BenM eingehen, basierend auf dem, was ich hier lesen von Ire Aderinokun. Da das User-Agent-Stylesheet hilfreiche Standard-Stylings bietet, sollten Sie es sich zweimal überlegen, bevor Sie es außer Kraft setzen.

Ich hatte einen dummen Fehler, bei dem ein Schaltflächenelement in Chrome nicht richtig aussah. Ich hatte es teilweise gestylt, weil ich nicht wollte, dass es wie eine herkömmliche Schaltfläche aussieht. Allerdings habe ich Stilelemente wie Rahmen, Rahmenfarbe usw. weggelassen. Also sprang Chrome ein und lieferte die Teile, von denen er dachte, dass sie fehlten.

Das Problem verschwand, als ich Stile wie border: none , usw.

Also, wenn jemand anderes dieses Problem hat, stellen Sie sicher, dass Sie explizit alle anwendbaren Standard-Benutzer-Agent-Stile für ein Element überschreiben, wenn Sie bemerken, dass es seltsam aussieht, vor allem, wenn Sie die Benutzer-Agent-Stile nicht vollständig zurücksetzen wollen. Bei mir hat es funktioniert.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X