Sto lavorando su una pagina web in Google Chrome. Viene visualizzata correttamente con i seguenti stili.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
È importante notare che non ho definito questi stili. Su Chrome dev tools, dice user agent stylesheet al posto del nome del file CSS.
Ora se invio un modulo e si verifica qualche errore di convalida, ottengo il seguente foglio di stile:
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;
}
Il font-size
di questi nuovi stili sta disturbando il mio design. C'è un modo per forzare i miei fogli di stile e, se possibile, sovrascrivere completamente il foglio di stile predefinito di Chrome?
Quali sono i browser di destinazione? Browser diversi impostano diverse regole CSS predefinite. Provate a includere un reset CSS, come il meyerweb css reset o normalize.css, per rimuovere questi default. Cerca su Google "css reset vs normalize" per vedere le differenze.
Per quanto riguarda il concetto di "foglio di stile dell'agente utente", consultate la sezione Cascade nella specifica CSS 2.1.
I fogli di stile dell'agente utente sono sovrascritti da qualsiasi cosa impostata nel proprio foglio di stile. Sono solo il fondo: in assenza di qualsiasi foglio di stile fornito dalla pagina o dall'utente, il browser deve ancora rendere il contenuto in qualche modo, e il foglio di stile dell'agente utente descrive solo questo.
Quindi, se pensate di avere un problema con un foglio di stile dell'interprete, allora avete davvero un problema con il vostro markup, o il vostro foglio di stile, o entrambi (di cui non avete scritto nulla).