2012-09-25 14 views
339

Pracuję nad stroną internetową w przeglądarce Google Chrome. Wyświetla się poprawnie z następującymi stylami.Co to jest arkusz stylów agenta użytkownika

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

Należy pamiętać, że nie zdefiniowałem tych stylów. W narzędziach Chrome dla Chrome w nazwie pliku CSS jest wyświetlany arkusz stylów agentów użytkownika.

Teraz, jeśli mogę przesłać formularz i występuje jakiś błąd sprawdzania poprawności, pojawia się 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-size z tych nowych stylów przeszkadza mój projekt. Czy jest jakiś sposób na wymuszenie moich arkuszy stylów i, jeśli to możliwe, całkowite zastąpienie domyślnego arkusza stylów Chrome?

+1

[chrome: jak wyłączyć ustawienia agenta arkusz stylów użytkownika] (http://stackoverflow.com/ questions/18006356) – givanse

+6

Należy również zauważyć, że w Chrome (51) otrzymasz tylko te dwie pozycje tabeli, gdy nie masz deklaracji typu dokumentu. W przeciwnym razie otrzymasz tylko drugi. – John

+0

Wyczyść pamięć podręczną Chrome w większej liczbie narzędzi -> Wyczyść dane przeglądania – doford

Odpowiedz

177

Jaka jest docelowa przeglądarka? Różne przeglądarki określają różne domyślne reguły CSS. Spróbuj wprowadzić reset.css lub normalise.css (Google dla jednego lub dla "reset vs normalize", aby zobaczyć różnice), aby usunąć te wartości domyślne.

+0

Dzięki Oli. Czy jest jakiś efekt uboczny usunięcia domyślnego CSS przeglądarki? Chyba nie jest to zalecane, prawda? Muszę zdecydować pomiędzy nadpisaniem ans ans (reset) lub @BenM a naszym własnym stylem. Każdy pomysł, który jest zalecany? –

+16

Zawsze resetuję/normalizuję mój CSS przed każdym projektem, w ten sposób uzyskujesz "prawie" pole poziomu w różnych przeglądarkach. Nigdy nie słyszałem o negatywnym "wpływie ubocznym" jako takim, jestem pewien, że jeśli spojrzysz szybko na Google, przekonasz się, że jest to zalecane. –

+1

Resetowanie stylów może powodować dziwne wyniki w polach formularzy, szczególnie wokół obramowań pól lub elementów wieloczęściowych, takich jak type = "file". – phyzome

8

Zdefiniuj wartości, których nie chcesz używać w stylu CSS użytkownika Chrome we własnym CSS.

80

Jeśli chodzi o pojęcie "arkusz stylów użytkownika agenta", należy zapoznać się z sekcją Cascade 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ą tylko dnem: w przypadku braku jakichkolwiek arkuszy stylów dostarczonych przez stronę lub użytkownika, przeglądarka nadal musi renderować treść jakoś, a arkusz stylu agenta użytkownika właśnie to opisuje.

Więc jeśli uważasz, że masz problem z arkuszem stylów agenta użytkownika, to naprawdę masz problem ze znacznikiem, arkuszem stylów lub obu (o których nic nie napisałeś).

+0

@givanse, nie, widzisz efekty arkusza stylów użytkownika użytkownika, gdy ich nie zastępujesz, a twój przykładowy znacznik nie jest wyjątkiem. Zostanie sparsowany jako jeden element 'li' zawierający dwa elementy' ul' z tekstową zawartością; są one stylizowane według arkusza stylów agenta użytkownika, ale ta stylizacja może zostać zmieniona. (To, czy znacznik jest nieważny, zależy od kontekstu i wersji HTML, ale nie ma to wpływu na stylizację.) –

+0

@givanse, problem ten nie dotyczy pytania "co to jest arkusz stylów użytkownika". Jeśli uważasz, że problem jest ważny, opublikuj go jako nowe pytanie z wystarczającymi szczegółami. Ale pocisk w twoim jsfiddle jest prostą kulą dla elementu 'li', a twój arkusz stylów go nie zastępuje. –

+0

Po prostu "kliknął", dzięki! – givanse

1

Niektóre przeglądarki używają własnego sposobu odczytywania plików .css. Tak więc właściwą drogą do pokonania tego problemu: Jeśli wpiszesz wiersz poleceń bezpośrednio w kodzie źródłowym .html, będzie to oznaczało plik .css, w ten sposób, bezpośrednio mówisz przeglądarce, co należy zrobić, a przeglądarka jest na miejscu. aby przeczytać polecenia z pliku .css. Pamiętaj, że polecenia napisane w pliku .html są silniejsze niż polecenie w pliku .css.

31

Oznaczenie dokumentu jako HTML5 przez właściwy typ dokumentu w pierwszym wierszu rozwiązał mój problem.

<!DOCTYPE html> 
<html>... 
+4

Czy możesz wyjaśnić, jak dokładnie ma działać? Jak HTML 5 jest powiązany z niezdefiniowanymi stylami? Potwierdzę, ale czy masz jakieś gotowe skrzypce, aby to potwierdzić? –

62

Jeśli <!DOCTYPE> brakuje w HTML można zaobserwować, że przeglądarka daje pierwszeństwo „agenta użytkownika stylesheet” nad niestandardowego arkusza stylów. Dodanie tego typu poprawek rozwiązuje ten problem.

+1

To świetna wskazówka. Uratowałeś mi trochę czasu na badania. Warto zauważyć, że w moim przypadku miałem tę deklarację doctype, ale wcześniej miałem skrypt. Wygląda na to, że DOCTYPE musi się stać pierwszą rzeczą na stronie, aby wziąć pod uwagę. – Sebas

+2

Wielu milionów $ odpowiedź ... –

+0

Dodanie rozwiązało bardzo dziwny problem pionowego wyrównania tr/td, który miałem. Dziękuję za tę odpowiedź. –

-7

umieścić następujący kod w pliku CSS

table { 
    font-size: inherit; 
} 
+1

To naprawdę nie dodaje nic nowego do tego postu. Istnieje już zaakceptowana odpowiedź, a także 5 innych odpowiedzi, więc nie wysyłaj później odpowiedzi. – Druzion

10

Zasadniczo domyślnego arkusza stylów dostarczone przez przeglądarkę. Od specyfikacji ...

Domyślny arkusz stylów klienta użytkownika powinien przedstawiać elementy języka dokumentu w sposób spełniający ogólne oczekiwania dotyczące prezentacji dla języka dokumentu. ~ The Cascade.

również zobaczyć więcej szczegółów na temat agenta użytkownika w ogóle ...

https://www.w3.org/TR/UAAG20/#def-user-agent

Powiązane problemy