Pracuję na stronie internetowej w Google Chrome. Wyświetla się poprawnie w następujących stylach.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}Należy zauważyć, że nie zdefiniowałem tych stylów. W narzędziach programistycznych Chrome napisano arkusz stylów agenta użytkownika zamiast nazwy pliku CSS.
Teraz, jeśli prześlę formularz i wystąpi błąd sprawdzania poprawności, otrzymam następujący arkusz stylów:
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;
}font-sizeZ tych nowych stylów przeszkadza mój projekt. Czy istnieje sposób, aby wymusić moje arkusze stylów i, jeśli to możliwe, całkowicie zastąpić domyślny arkusz stylów Chrome?
css
google-chrome
Kapil Sharma
źródło
źródło
Odpowiedzi:
Jakie są docelowe przeglądarki? Różne przeglądarki ustawiają różne domyślne reguły CSS. Spróbuj dołączyć reset CSS, taki jak reset CSS meyerweb lub normalize.css , aby usunąć te ustawienia domyślne. Google „CSS reset vs normalize”, aby zobaczyć różnice.
źródło
<!DOCTYPE>jest poprawne przez @SebasJeśli
<!DOCTYPE>brakuje w treści HTML, może się zdarzyć, że przeglądarka preferuje „arkusz stylów agenta użytkownika” niż własny arkusz stylów. Dodanie doctype rozwiązuje ten problem.źródło
Jeśli chodzi o pojęcie „arkusz stylów agenta użytkownika”, zobacz sekcję Kaskada w specyfikacji CSS 2.1.
Arkusze stylów agenta użytkownika są zastępowane przez wszystko, co ustawisz we własnym arkuszu stylów. Są one po prostu bardzo dno: w przypadku braku arkuszy stylów dostarczonych przez stronę lub użytkownika przeglądarka nadal musi w jakiś sposób renderować treść , a arkusz stylów agenta użytkownika tylko to opisuje.
Jeśli więc uważasz, że masz problem z arkuszem stylów agenta użytkownika, to naprawdę masz problem ze znacznikami lub arkuszem stylów, lub z obydwoma (o których nic nie napisałeś).
źródło
lielement zawierający dwaulelementy zawierające tylko tekst; są one stylizowane za pomocą arkusza stylów agenta użytkownika, ale ten styl można zastąpić. (To, czy znacznik jest nieprawidłowy, zależy od kontekstu i wersji HTML, ale nie wpływa to na styl.)lielementu, a twój arkusz stylów go nie zastępuje.Oznaczenie dokumentu jako HTML5 przez odpowiedni typ dokumentu w pierwszym wierszu rozwiązało mój problem.
źródło
Arkusz stylów agenta użytkownika to „domyślny arkusz stylów” dostarczany przez przeglądarkę (np. Chrome, Firefox, Edge itp.) W celu prezentacji strony w sposób, który spełnia „ogólne oczekiwania dotyczące prezentacji”. Na przykład domyślny arkusz stylów zapewni podstawowe style dla takich rzeczy, jak rozmiar czcionki, ramki i odstępy między elementami. Często stosuje się zresetowany arkusz stylów, aby radzić sobie z niespójnościami między przeglądarkami.
Ze specyfikacji ...
Aby uzyskać więcej informacji na temat agentów użytkownika, zobacz agent użytkownika .
źródło
Odpowiadając na tytułowe pytanie, jaki jest arkusz stylów agenta użytkownika, zestaw domyślnych stylów w przeglądarce: Oto niektóre z nich (i najbardziej odpowiednie również w dzisiejszej sieci):
Gecko (Firefox): https://dxr.mozilla.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
Osobista opinia: nie walcz z nimi. Mają dobre wartości domyślne, na przykład w przypadkach rtl / bidi i są obecnie spójne. Zresetuj to, co uważasz za nieistotne dla Ciebie, nie wszystkie jednocześnie.
źródło
Zdefiniuj wartości, których nie chcesz używać ze stylu agenta użytkownika Chrome we własnej zawartości CSS.
źródło
Niektóre przeglądarki używają własnego sposobu do odczytu plików .css. Tak więc właściwy sposób na pokonanie tego: jeśli wpiszesz wiersz poleceń bezpośrednio w kodzie źródłowym .html, to pobije plik .css, w ten sposób powiesz bezpośrednio przeglądarce, co robić, a przeglądarka będzie w stanie nie czytać polecenia z pliku .css. Pamiętaj, że polecenia zapisane w pliku .html są silniejsze niż polecenia w .css.
źródło
Miałem taki sam problem, jak jeden z moich <div> miał margines ustawiony przez przeglądarkę. To było dość irytujące, ale potem zorientowałem się, jak większość ludzi powiedziała, że to błąd znaczników.
Wróciłem i sprawdziłem sekcję <head>, a mój link CSS był jak poniżej:
<link rel="stylesheet" href="ex.css">Zawarłem
typew nim i zrobiłem to jak poniżej:<link rel="stylesheet" type="text/css" href="ex.css">Mój problem został rozwiązany.
źródło
Każda przeglądarka udostępnia domyślny arkusz stylów, zwany arkuszem stylów agenta użytkownika, w przypadku gdy plik HTML go nie określa. Określone style zastępują wartości domyślne.
Ponieważ nie określono wartości dla pola elementu tabeli, zastosowano domyślne style.
źródło
Chciałem tylko rozwinąć odpowiedź @BenM na podstawie tego, co przeczytałem tutaj od Ire Aderinokun. Ponieważ arkusz stylów użytkownika-użytkownika zawiera przydatne style domyślne, zastanów się dwa razy, zanim je przesłonisz.
Miałem głupi błąd, gdy element przycisku nie wyglądał poprawnie w Chrome. Częściowo go zaprojektowałem, ponieważ nie chciałem, aby wyglądał jak tradycyjny guzik. Pominąłem jednak elementy stylu, takie jak obramowanie, kolor obramowania itp. Chrome wkroczył, by dostarczyć części, o których myślałem, że mi ich brakuje.
Problem zniknął po dodaniu stylów
border: noneitp.Jeśli więc ktoś ma ten problem, upewnij się, że jawnie przesłoniłeś wszystkie odpowiednie domyślne style klienta użytkownika dla elementu, jeśli zauważysz, że wygląda on niepewnie, szczególnie jeśli nie chcesz całkowicie resetować stylów użytkownika użytkownika. To zadziałało dla mnie.
źródło
Mam rozwiązanie Sprawdź to:
Błąd
Poprawny
źródło
Umieść następujący kod w pliku CSS:
źródło