Firefox: interpretazione errata del modello box?

Question

Ho appena scoperto uno strano comportamento di Firefox.

Se ho una cella di tabella di 100 px di altezza e aggiungo 20 px di riempimento, l'altezza totale dovrebbe diventare 140 px.

Tutti i browser si comportano correttamente, Firefox 8.0 ignora il padding:

http://jsfiddle.net/8wDde/

nessuno lo sappia una correzione?

Answer 1

Sembra che la migliore soluzione cross browser potrebbe essere quella di impostare l'altezza della riga di tabella uguale di altezza e imbottitura della cella:

tr {height: 140px;} 

See: http://jsfiddle.net/8wDde/19/

Answer 2

questo è uno strano comportamento. aggiungi display:block; puoi risolvere il problema. testato in FF8.01 vedere:

http://jsfiddle.net/8wDde/1/

Ma anche io non so perché?

Ho cercato in https://developer.mozilla.org/en-US/search?q=table+padding, ma non ho trovato nulla. Potresti anche provare a cercare lì.

UPDATE: http://jsfiddle.net/8wDde/7/

aggiungere overflow:hidden per evitare la linea td cambiamento.

Answer 3

Non sono riuscito a trovare alcuna informazione al riguardo su Google, quindi un modo per risolverlo per Firefox sarebbe quello di utilizzare un hack CSS.

@-moz-document url-prefix() { 
td{ 
    height:140px !important; 
} 
} 

Ovviamente, se l'altezza era 200px, si dovrà modificare che per 240px per spiegare la scomparsa 20px in alto e in basso.

Che si rivolge a tutte le versioni di Firefox, non sono sicuro se ci sia un hack specifico FF8.

Potete vedere questa demo qui: http://jsfiddle.net/charlescarver/8wDde/2/

Edit: mi piace la risposta di Giberno più

Answer 4

Questa è una descrizione più completa di un paio di commenti che ho fatto su another question, si spera, un po 'più chiaro. Nota che Opera ha lo stesso comportamento di Firefox.

Nello schema sopra, l'area totale della cella è la casella scura e il testo My Text è il contenuto dello td ed è quello che definisce la casella della cella (C).

Ora, il CSS 2.1 specifiche dice:

L'altezza della scatola un elemento 'table-row' del viene calcolata una volta che l'agente utente ha tutte le celle della riga disponibile: è il massimo calcolato 'altezza' della riga , l'altezza calcolata di ciascuna cella nella riga e l'altezza minima (MIN) richiesta dalle celle. Un valore "altezza" di "auto" per una "riga di tabella" indica che l'altezza della riga utilizzata per il layout è MIN. MIN dipende dalle altezze della scatola della cella e dall'allineamento della cella (molto come il calcolo dell'altezza della casella di riga). ...

In CSS 2.1, l'altezza di una cella è l'altezza minima richiesta da del contenuto. La proprietà 'height' della cella della tabella può influenzare l'altezza della riga (vedere sopra), ma non aumenta l'altezza di nella cella.

Quindi td { height:100px; } influisce sull'altezza di riga (R) (sarà alta almeno 100px) ma non ha effetto sulla casella della cella (C).

D'altra parte, td { padding:20px; } si applica alla casella di cella (C), quindi se l'altezza di (C) + riempimento superiore + riempimento inferiore è inferiore a 100 px, l'altezza della riga non viene modificata ed è ancora pari a 100 pixel.

Se (C) + imbottitura superiore + imbottitura inferiore è maggiore di 100 px, l'altezza della riga si espanderà per adattarsi all'intera altezza di (C) + imbottitura superiore + imbottitura inferiore.

Quindi td { background-color:blue } si applica all'altezza riga intera (R) e alla larghezza della cella.

si può vedere questo in azione a http://jsfiddle.net/Ez7xz/

Il fattore di confusione finale è il valore dell'altezza calcolata del td in Firebug. Ciò che sembra accadere qui è che si presume che l'altezza sia il risultato del dimensionamento della casella content-box e che riporta il valore di R meno il riempimento superiore e inferiore. Anche se questo sembra strano, non è ovvio quale altro valore potrebbe ragionevolmente riportare.