HTML5 Acolchado de celdas de tabla: diferente en los navegadores

He desglosado esto por un ejemplo bastante simple.HTML5 Acolchado de celdas de tabla: diferente en los navegadores

Para mí, se ve diferente en Chrome 7.0 que en Firefox 3.6.12. IE 9 beta se parece a Chrome.

Me gustaría poder configurar el relleno en el TD y hacerlo renderizar con la misma altura en todos los navegadores. Actualmente, con el relleno superior de 10 píxeles, las celdas de Chrome se ven más altas que en Firefox.

He intentado utilizar el restablecimiento de CSS css, no cambia el resultado ¿Alguna idea de por qué se procesan de forma diferente?

Aquí hay un ejemplo de cómo se ve - http: // yfrog. com/5zqa7p

y el código ...

<!DOCTYPE html> 
<head> 
<title>padding test</title> 
<meta charset=utf-8> 
<style> 
td { width: 100px; height:100px; background: green; padding: 10px 0 0 0; } 
</style> 
</head> 
<body> 
<table> 
<tr><td>TEST</td></tr> 
<tr><td>TEST</td></tr> 
</table> 
</body>

Fuente

2010-11-09 kolcun

Hay aparentemente un error en la forma en que Firefox y Chrome mango acolchado en las celdas de tabla en HTML 5: http://code.google.com/p/chromium/issues/detail?id=50633

Al intentar su margen de beneficio y CSS con 0 relleno, que son la misma. Cuando cambias el DOCTYPE para que no sea HTML5, son lo mismo.

Fuente

2010-11-09 13:36:00 Robusto

Yup - eliminar el doctype hace que ambos navegadores lo rendericen igual (IE también) – kolcun

td { padding: 10px 0 0 0; }

Esta dice: padding-top: 10px;, sustituya el 10px con 0 y con suerte que va a ser el mismo. Esto significa que Firefox e IE9 no tienen en cuenta el relleno. (Creo)

Fuente

2010-11-09 13:32:14 Kyle

Para HTML5, algunos navegadores agregan 2px a las celdas de la tabla con imágenes si el alto de línea es el predeterminado. Está marcado como un error, no esperes que siempre sea así.

table { line-height: 0; }

Fuente

2012-05-04 01:57:06

Debe escribirse así padding: 0 10px 0 10px; de lo contrario, los navegadores no son totalmente compatibles con la dimensión.

Fuente

2012-09-27 22:14:39 4michaelcoleman

En realidad, este comportamiento es causado por diferentes valores predeterminados de valores box-sizing en elementos TD. Echar un vistazo a la especificación: http://www.w3.org/TR/css3-ui/#box-sizing0

Box-dimensionamiento es apoyado por suerte en todos los principales navegadores, ver http://caniuse.com/#search=box-sizing

Pero hay problemas en los navegadores que le impide anulando valor predeterminado box-sizing, sobre todo cuando se trabaja con TD , el comportamiento es casi impredecible en todos los navegadores.

En this JSFiddle example se muestra el comportamiento más estable entre los navegadores en border-box y content-box en un elemento DIV.

Así que simplemente evite utilizar el relleno cuando se fija la altura, y en su lugar simplemente envuelva los contenidos de TD con un contenedor de relleno adicional como una solución simple ya prueba de balas.

Espero que esto ayude!

Fuente

2012-10-23 07:11:27 gkond

me encontré con CSS específico del navegador (from here) para Firefox es un poco descriptivo, como:

background-color:#447d9a; 
background-image:url('img/bg.jpg'); 
background-repeat:repeat-x;

Por lo tanto, creo que, para Firefox, el relleno puede ser descriptivo más bien breve (padding:10px 0 0 0;):

padding-top: 10px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px;

Es una solución (o puede ser una solución) solo para Firefox; y puede funcionar para que los otros navegadores depuren específicamente.

Fuente

2012-10-24 19:24:17

Eso no es específico de Firefox. Tanto la versión abreviada como la versión larga de las propiedades de relleno son parte de la especificación CSS 2.1 y son compatibles con todos los navegadores. (http://www.w3.org/TR/CSS21/box.html#padding-properties) –

HTML5 Acolchado de celdas de tabla: diferente en los navegadores

Respuesta

Cuestiones relacionadas