Ik werk aan een webpagina in Google Chrome. Het wordt correct weergegeven met de volgende stijlen.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Het is belangrijk op te merken dat ik deze stijlen niet heb gedefinieerd. In de ontwikkelaarstools van Chrome staat user agent stylesheetin plaats van de CSS-bestandsnaam.
Als ik nu een formulier verzend en er treedt een validatiefout op, dan krijg ik de volgende 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;
}
De font-sizevan deze nieuwe stijlen stoort mijn ontwerp. Is er een manier om mijn stylesheets te forceren en, indien mogelijk, de standaard stylesheet van Chrome volledig te overschrijven?
Antwoord 1, autoriteit 100%
Wat zijn de doelbrowsers? Verschillende browsers stellen verschillende standaard CSS-regels in. Probeer een CSS-reset op te nemen, zoals de meyerweb CSS-resetof normalize.css, om deze standaardinstellingen te verwijderen. Google “CSS reset vs normaliseren” om de verschillen te zien.
Antwoord 2, autoriteit 61%
Als <!DOCTYPE>ontbreekt in uw HTML-inhoud, kan het zijn dat de browser de voorkeur geeft aan de “user-agent-stylesheet” boven uw aangepaste stylesheet. Het toevoegen van het doctype lost dit op.
Antwoord 3, autoriteit 45%
Over het concept “user-agent stylesheet”, raadpleeg sectie Cascadein de CSS 2.1-specificatie.
User-agent-stylesheets worden overschreven door alles wat u in uw eigen stylesheet instelt. Ze zijn slechts het dieptepunt: als er geen stylesheets worden geleverd door de pagina of door de gebruiker, moet de browser de inhoud nog steeds op de een of andere manierweergeven, en de user-agent-stylesheet beschrijft dit alleen.
Dus als je denkt dat je een probleem hebt met een user-agent-stylesheet, dan heb je echt een probleem met je opmaak, of je stylesheet, of beide (waarover je niets hebt geschreven).
Antwoord 4, autoriteit 19%
Het document markeren als HTML5 door het juiste doctype op de eerste regel, loste mijn probleem op.
<!DOCTYPE html>
<html>...
Antwoord 5, autoriteit 13%
Een user-agent-stylesheet is een ‘standaard stylesheet’ die door de browser (bijv. Chrome, Firefox, Edge, enz.) wordt geleverd om de pagina op een manier te presenteren die voldoet aan de ‘algemene presentatieverwachtingen’. Een standaardstijlblad zou bijvoorbeeld basisstijlen bieden voor zaken als lettergrootte, randen en afstand tussen elementen. Het is gebruikelijk om een resetstylesheet te gebruiken om inconsistenties tussen browsers op te lossen.
Van de specificatie…
Het standaardopmaakmodel van een user-agent moet de elementen van de documenttaal presenteren op een manier die voldoet aan de algemene presentatieverwachtingen voor de documenttaal. ~ De Cascade.
Voor meer informatie over user agents in het algemeen, zie user agent .
Antwoord 6, autoriteit 9%
Beantwoorden van de vraag in de titel, wat is het user-agent-stylesheet, de set standaardstijlen in de browser: hier zijn er enkele (en de meest relevante ook op het internet van vandaag):
-
Gecko (Firefox): https:// searchfox.org/mozilla-central/source/layout/style/res/html.css
-
Chromium (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
-
WebKit (Safari): https:// trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Persoonlijke mening: vecht niet met ze. Ze hebben goede standaardwaarden, bijvoorbeeld in rtl/bidi-gevallen en zijn tegenwoordig consistent. Reset wat u irrelevant vindt, niet allemaal tegelijk.
Antwoord 7, autoriteit 5%
Definieer de waarden die u niet wilt gebruiken in de user-agentstijl van Chrome in uw eigen CSS-inhoud.
Antwoord 8
Sommige browsers gebruiken hun eigen manier om .css-bestanden te lezen.
Dus de juiste manier om dit te verslaan:
Als u de opdrachtregel rechtstreeks in de .html-broncode typt, verslaat dit het .css-bestand, op die manier vertelde u de browser direct wat hij moest doen en is de browser in de positie om de opdrachten uit het .css-bestand niet te lezen.
Onthoud dat de opdrachten die in het .html-bestand zijn geschreven sterker zijn dan de opdrachten in de .css.
Antwoord 9
Ik had hetzelfde probleem toen een van mijn <div>’s de marge had ingesteld door de browser. Het was behoorlijk vervelend, maar toen kwam ik erachter, zoals de meeste mensen zeiden, dat het een opmaakfout is.
Ik ging terug en controleerde mijn <head> sectie en mijn CSS-link was zoals hieronder:
<link rel="stylesheet" href="ex.css">
Ik heb typeerin opgenomen en het zoals hieronder gemaakt:
<link rel="stylesheet" type="text/css" href="ex.css">
Mijn probleem is opgelost.
Antwoord 10
Ik wilde alleen wat meer vertellen over de reactie van @BenM op basis van wat ik lees hiervan Ire Aderinokun. Omdat het user-agent-stylesheet een handige standaardstijl biedt, moet je twee keer nadenken voordat je het overschrijft.
Ik had een domme fout waarbij een knopelement er niet goed uitzag in Chrome. Ik had het gedeeltelijk gestyled omdat ik niet wilde dat het eruit zou zien als een traditionele knop. Ik heb echter stijlelementen zoals rand, randkleur, enz. weggelaten. Dus Chrome kwam tussenbeide om de onderdelen te leveren waarvan het dacht dat ik het miste.
Het probleem verdween toen ik stijlen toevoegde zoals border: none, enz.
Dus als iemand anders dit probleem heeft, zorg er dan voor dat je expliciet alle toepasselijke standaard user-agent-stijlen voor een element overschrijft als je merkt dat het er slordig uitziet, vooral als je de user-agent-stijlen niet volledig wilt resetten . Het werkte voor mij.
Antwoord 11
Elke browser biedt een standaard stylesheet, de user-agent stylesheet, voor het geval een HTML-bestand er geen specificeert. Stijlen die u opgeeft, overschrijven de standaardinstellingen.
Omdat u geen waarden heeft opgegeven voor het vak van het tabelelement, zijn de standaardstijlen toegepast.
Antwoord 12
Ik kwam hetzelfde probleem tegen, omdat ik met niet-semantische html werkte
<!--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>
Nadat de HTML was bijgewerkt, werden stijlen correct toegepast
Antwoord 13
Ik heb een oplossing. Controleer dit:
Fout
<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">
Correct
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Antwoord 14
Plaats de volgende code in uw CSS-bestand:
table {
font-size: inherit;
}