Firefox: ¿interpretación errónea del modelo de caja?

Question

Acabo de descubrir un comportamiento extraño de Firefox.

Si tengo una celda de tabla de 100px de altura y le agrego un relleno de 20px, su altura total debe ser de 140px.

Todos los navegadores actúan correctamente, Firefox 8.0 ignora el relleno:

http://jsfiddle.net/8wDde/

Cualquiera que conozca un arreglo?

Answer 1

Parece que la mejor solución navegadores puede ser la de establecer la altura de la fila de la tabla iguales a la altura y el relleno de la celda:

tr {height: 140px;} 

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

Answer 2

que es un comportamiento extraño. agregar display:block; puede solucionar el problema. probado en FF8.01 véase:

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

Pero también no sé por qué?

Realicé búsquedas en https://developer.mozilla.org/en-US/search?q=table+padding, pero no encontré nada. Puede ser que también puedas intentar buscar allí.

ACTUALIZACIÓN: http://jsfiddle.net/8wDde/7/

añadir overflow:hidden para evitar la cola td cambio.

Answer 3

No pude encontrar ninguna información sobre esto en Google, por lo que una forma de arreglarlo para Firefox sería utilizar un hack de CSS.

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

Obviamente, si la altura fue 200px, entonces lo que cambia a 240px dar cuenta de la falta 20px en la parte superior y en la parte inferior.

Eso apunta a todas las versiones de Firefox, no estoy seguro de si hay un hack de css específico para FF8.

Se puede ver esta demo aquí: http://jsfiddle.net/charlescarver/8wDde/2/

Editar: me gusta la respuesta de Giberno más

Answer 4

Esta es una descripción más completa de un par de comentarios que hice en another question, es de esperar un poco más claro. Tenga en cuenta que Opera tiene el mismo comportamiento que Firefox.

En el diagrama anterior, el área total de la celda es el cuadro oscuro, y el texto My Text es el contenido de td, y es eso lo que define la Celda (C).

Ahora, el CSS 2.1 spec dice:

La altura de la caja de un elemento 'table-row' se calcula una vez que el agente de usuario tiene todas las celdas de la fila disponible: es el máximo de 'altura' de la de fila computarizada, la 'altura' calculada de cada celda en la fila , y la altura mínima (MIN) requerida por las celdas. Un valor de 'altura' de 'auto' para una 'fila de tabla' significa que la altura de fila utilizada para el diseño es MIN. MIN depende de las alturas de la celda y de la alineación de la celda (mucho como el cálculo de la altura de un recuadro). ...

En CSS 2.1, la altura de una celda es la altura mínima requerida por el contenido. La propiedad 'height' de la celda de la tabla puede influir en la altura de la fila (ver arriba), pero no aumenta la altura de la celda.

Por lo tanto, td { height:100px; } afecta a la Altura de fila (R) (será al menos de 100 px de alto) pero no afecta a la Caja de celda (C).

Por otra parte, td { padding:20px; } se aplica a la Celda (C), por lo que si la altura de (C) + Relleno superior + Relleno inferior es inferior a 100px, la altura de la fila no se verá afectada y seguirá siendo 100px.

Si (C) + Relleno superior + Relleno inferior es mayor que 100 píxeles, la altura de la fila se ampliará para adaptarse a la altura completa de (C) + Relleno superior + Relleno inferior.

Luego, td { background-color:blue } se aplica a la altura de fila completa (R) y al ancho de la celda.

Esto se puede ver en acción en http://jsfiddle.net/Ez7xz/

El factor de confusión final es el valor de la altura calculada del td en Firebug. Lo que parece estar sucediendo aquí es que supone que la altura es el resultado del tamaño de la caja content-box, y que informa el valor de R menos el relleno superior e inferior. Si bien esto parece extraño, no es obvio qué otro valor podría informar razonablemente.