2015-01-08 3 views
7

MODIFICA *** In quali casi gli stili degli agenti utente possono sovrascrivere i CSS personalizzati?foglio di stile utente sostituisce i miei stili


Ho un paio di stili impostati su un elemento in una pagina del mio, sembra che l'agente foglio di stile dell'utente sovrascrivono le mie definizioni.

Sta accadendo in Chrome versione 39.0.2171.95 m, Firefox 34.0.5, ma non in IE 11.

So che non ho alcun stili diretti sulla quell'elemento, ma è la mia comprensione che il foglio di stile user-agent prende SOLO se non ci sono assolutamente stili per un particolare elemento. Gli stili ereditati non contano per quello?

enter image description here

+0

È necessario includere HTML e CSS sufficienti, come testo, per riprodurre il problema. –

+0

Dovrei pubblicare pagine di CSS e HTML. Ho pensato semplicemente pubblicando gli stili calcolati come per gli strumenti per sviluppatori di Chrome, in modo che potessimo vedere che ci sono degli stili applicati all'elemento, ma vengono sovrascritti con gli stili degli user agent. Credo che dovrei pubblicare nella mia domanda "In quali casi gli stili degli user agent possono sovrascrivere i CSS personalizzati?" - Lo farò ora. –

+1

No, avresti dovuto pubblicare un documento * minimale * che effettivamente dimostri il problema. Ma nella mia risposta qui di seguito penso di aver ricostruito un caso semplice. E non dovresti cambiare una domanda in una domanda sostanzialmente diversa o porre una domanda generale quando hai un problema specifico. Le domande generali sono spesso troppo ampie (e anche se non lo sono, le risposte potrebbero non risolvere il tuo vero problema). –

risposta

8

La risposta alla domanda di carattere generale è che le impostazioni di proprietà solo impostati su un elemento in sé sono presi in considerazione al momento di decidere quale impostazione stile “vince”. Ad esempio, se abbiamo un solo foglio di stile che imposta sull'elemento body e un altro foglio di stile che imposta font-size: 9px su tutti gli elementi p, la dimensione del font degli elementi p è 9px, indipendentemente dalle origini dei fogli di stile, per esempio se quest'ultimo è solo un foglio di stile predefinito del browser. L'ereditarietà non ha alcun ruolo qui. Tutto questo è descritto nella sezione Assigning property values, Cascading, and Inheritance della specifica CSS 2.1.

L'ereditarietà è considerata solo dopo che il suddetto "combattimento" è stato risolto. Solo allora sono ereditate proprietà ereditate da elementi che non li hanno impostati su tutti.

La domanda specifica non fornisce codice specifico, ma si può dedurre di avere qualcosa di simile:

<style> 
    body { font-size: 12px; } 
</style> 
<table> 
    <tr><td>foo 
</table> 
bar 

Normalmente questo fa sì che sia “foo” e “bar” a comparire in 12px dimensioni. La cella della tabella eredita la dimensione dalla riga della tabella, che la eredita dall'elemento tbody, che la eredita dalla tabella, che la eredita dallo body.

Tuttavia, nel tuo caso, questa catena è rotta. Il motivo è che il foglio di stile del browser ha

table { font-size: medium } 

che in pratica tende a 16px. Ora l'elemento table ha la proprietà impostata, quindi la cella eredita tale valore.

I browser normalmente non hanno questa regola nei fogli di stile. Tuttavia, in Quirks Mode, la maggior parte dei browser applica la regola. Ciò significa che la dimensione del carattere non è ereditata da body nelle tabelle. Ciò riflette bug (o stranezze) in versioni molto vecchie di IE e consente di rendere la pagina legacy come un tempo.

Se avete involontariamente causato quirks mode e non hanno bisogno per altri scopi, proprio schiaffo

<!DOCTYPE html> 

proprio all'inizio del documento. Ma attenzione che le vecchie pagine possono essere incasinate in modi diversi, se sono state progettate in condizioni di test che corrispondono alla modalità Quirks.

In alternativa, aggiungere la seguente regola nel foglio di stile:

table { font-size: 100% } 

Ciò significa che un tavolo ottiene la dimensione del carattere del suo genitore. (Come in ereditarietà, ma più sicuro.)

-1

utilizzare un normalize.css per evitare questo problema, se non impostato nessuno stile a un elemento, ha ereditato lo stile user agent.

http://necolas.github.io/normalize.css/

+0

Sì, ne sono consapevole. Ma ho già applicato gli stili all'elemento. La mia domanda è perché sta sovrascrivendo gli stili applicati all'elemento. –