Table-layout: diferencias de representación fijas en Safari

Question

Básicamente el problema que tengo es que en Safari/Chrome está cambiando el ancho de mis columnas aunque he especificado a) un ancho en la tabla, b) table-layout: fijo, yc) anchos específicos en mi primera fila que cuando se agregan con los valores de relleno y borde se suman al ancho de la tabla especificada. En IE7 y Firefox 3, la tabla se representa igual. Pero en Safari/Chrome decide agrandar la segunda columna tomando espacio de las otras columnas.

¿Alguna idea? Tengo un very simple sample page que puede ver, así como an image que muestra cómo se representa la tabla en los tres navegadores para comparar.

Answer 1

Después de mirar a su alrededor, creo que esto es causado por los siguientes errores webkit: 13339 y 18565. Básicamente es un problema con la forma en que utiliza los valores de borde y relleno al calcular el ancho final de las columnas.

Terminé haciendo algunos navegadores olfateando y estableciendo algunos valores CSS diferentes basados ​​en eso para navegadores webkit de modo que la representación final fuera la misma que FF e IE.

Answer 2

¿Ha intentado cargar algunos Reset CSS? http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 3

Pude solucionar este problema eliminando el relleno del <th> con el ancho fijo. A continuación, puede agregar relleno de forma segura al <td>

Answer 4

En los kits web con errores, table-layout: fixed también proporciona las celdas de su tabla box-sizing: border-box. Una alternativa a la detección del navegador se establece explícitamente en box-sizing: border-box para obtener un comportamiento consistente en todos los navegadores, luego ajuste los anchos y las alturas en consecuencia (el ancho y la altura se deben aumentar para incluir el relleno y los bordes).

#my-table td { 
    box-sizing: border-box; 
} 

Answer 5

He hecho una rejilla Kendo tenga la tabla: ancho fijo. Todas las columnas desaparecieron pero solo en Safari. Tras la inspección, todos los elementos td tienen un ancho de estilo calculado de -3px. Si elimino la tabla: ancho fijo, está bien. Si especifico anchos de píxeles personalizados (pero no porcentajes), está bien. Si desactivo cada estilo aplicado desde cada fuente css que puedo encontrar (en la pestaña de estilo de la consola), el problema no se soluciona y nada allí establece el ancho -3px.

Así que tengo que configurar todos los anchos de píxeles de la columna o bien no utilizar la tabla: ancho fijo.