CSS: Chrome y Safari parecen 'agregar' borde al ancho, mientras que IE, Firefox y Opera no lo hacen

Question

Estoy tratando de lograr la coherencia entre navegadores para mi sitio web.

Es sobre esta página: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (Tenga en cuenta que prefiero este URL para no ser hecho rastreable para SEO-bots)

Si ve esta página en IE, Firefox u Opera, todo está bien, pero en Chrome y Safari las tablas están un poco fuera de línea (como probablemente notará claramente).

¿Cuál parece ser el problema?

Me parece que en Chrome y Safari los bordes izquierdo y derecho (2px) en total se agregan al ancho de la tabla establecida, mientras que en los otros navegadores el borde se considera parte del ancho.

El (la mayoría) de CSS líneas relevantes son los siguientes (desde el archivo table.css, también disponibles a través de archivos fuente de la página):

table.uitbetaling { 
margin: 11px 18px 10px 19px; 
border: 1px solid #8ccaee; 
width: 498px; 
padding: 0; 
} 
table.uitbetaling img, table.uitbetaling td { 
margin: 0; 
border: 0; 
padding: 0; 
width: 496px; 
} 
table.uitbetaling tr { 
margin: 0; 
border: 0; 
padding: 0 1px 0 0; 
} 

Así que básicamente han utilizado una mesa- estructura para organizar imágenes, así: (la clase de la tabla es uitbetaling)

<table> 
<tr><td><img /></td></tr> 
<tr><td><img /></td></tr> 
... 
<tr><td><img /></td></tr> 
</table> 

Si, aquí, configuré el ancho de table.uitbetaling y table.uitbetaling img, table.uitbetaling td con el mismo valor (p. ambos 496 o 498), el "problema" en Chrome y Safari está resuelto, sin embargo, en Firefox, el borde del lado derecho está en blanco. Porque el borde del lado derecho ya no puede "encajar". img y td debe ser al menos 2px más estrecho que table.uitbetaling para que el borde derecho sea visible en Firefox.

¿Hay alguna manera de solucionar esto?

Answer 1

Probar:

table{border-collapse:collapse;} 

Answer 2

segmento de su código en sus elementos más simples y prueba de ellos en cada navegador. Cuando encuentre las diferencias, puede usar diferentes métodos de detección de navegadores para alterar sutilmente el código de cada instancia. Dicho eso ... si no quieres ponerte loco de verdad, y CSS lo hará más que cualquier cosa en la programación, deja que el pixel funcione si puedes.

Answer 3

Para estar seguro, por lo general abrir una tabla de esta manera:

<table cellspacing="0" cellpadding="0">

Es HTML "viejo", pero al menos se obliga a la coherencia a lo largo de los navegadores, y luego aplicar CSS según sea necesario.

Answer 4

Lo había comprobado con Opera 11, Google Chrome 7.0.517.44 y FireFox 3.6.12 no han visto ninguna diferencia con el diseño de su sitio.

Answer 5

¿Declaraste el DTD (DOCTYPE)?

Lea esto:

http://msdn.microsoft.com/en-us/library/bb250395.aspx

Parece que los navegadores tienen diferentes formas de mostrar las fronteras, pero la declaración DOCTYPE (que va en la parte superior del documento html) obligarlos a cumplir con el actual estándares, al menos en lo que respecta al modelo de css box.

Nota: Siempre uso el DTD XHTML de transición para hacer mi documento lo más compatible posible ...

Buena suerte!

Answer 6

sus buenas prácticas para establecer siempre table{border-collapse:collapse;} en el css, y luego utilice cell-padding="0" y cell-spacing="0" en el html de todos modos.

Answer 7

Hoy en día se debe utilizar el tipo de documento HTML 5, si usted está teniendo problemas sobre fronteras sumándose a la anchura del elemento de mirar hacia arriba el estilo CSS: cuadro de dimensionamiento de

frontera-box - Incluir borde anchura/altura y el relleno de anchura/altura o básicamente el ancho que el sistema incluye la fronteras/acolchado

contenido de la caja - la anchura se establece en el elemento sólo es el área de contenido, esto no incluye el relleno o fronteras

También hay una caja de relleno que no uso, por lo general, los dos anteriores son suficientes.

Ahora, a veces, creo que IE8 utiliza un tamaño de caja diferente al de Chrome/FF, etc., por eso a veces tiene problemas. Siempre puede depurar y verificar en qué está configurado el tamaño de la caja.

Nota: si usted no tiene el DOCTYPE entonces usted está en el modo de peculiaridades, y el IE difiere enormemente de cromo/FF en el modelo de caja de tamaño/caja - y eso es su problema allí mismo