celda de la tabla y la frontera donde se presentan de manera diferente en IE / Chrome y Firefox / Opera

StackOverflow https://stackoverflow.com/questions/701332

  •  22-08-2019
  •  | 
  •  

Pregunta

Después de varias horas de frustración que finalmente recurrido a Internet para la respuesta. Imagínese esto extremadamente simple trozo de código: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>AARRRRRRGH</title>
    </head>
    <body>
        <table>
            <tr>
                <td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td>
            </tr>
        </table>
    </body>
</html>

Ahora bien, esto parece bastante sencillo, crear una celda de la tabla de 100px de ancho y 100px de alto con un borde 6px. Tan simple como parece, se ve diferente en distintos navegadores. En IE8 y Google Chrome la celda de la tabla es de 112 x 112 píxeles (por lo 100px dentro y 6px exterior). En Firefox 3 y opera la mesa es de 112 x 100 píxeles (lo que por alguna razón se añade la frontera a la anchura de la tabla, pero no a la altura de la mesa).

En serio, ¿qué pasa? Y ¿cómo puedo hacer esto hacen el mismo en cada navegador (y no, no puedo utilizar un div que necesito utilizar una tabla en este caso).

¿Fue útil?

Solución

  

En serio, lo que da?

Sí ... altos de celdas de tabla y borde vertical son realmente muy mal definidos en la especificación CSS 2.1. No hay nada que explica plenamente cómo interactúan, y el modelo de bloques estándar no es cubrir la misma. La figura de la sección 17.6.1, cuando demuestren la definición de anchuras deliberadamente no cubre alturas.

Fwiw No creo que la interpretación Mozilla / de Opera tiene sentido, pero no puedo decir que es fuera de entrada y salida equivocada.

  

¿cómo puedo hacer esto hacen el mismo en cada navegador (y no, no se puede utilizar un div que necesito utilizar una tabla en este caso).

¿Qué tal un div dentro de la tabla? 

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
    <div style="height: 100px;">...</div>
</td>

Ahora está claro que la medición de la ‘100px’ se refiere a. Esto funciona para mí.

Otros consejos

¿Has probado otros DOCTYPES? He tenido buena suerte con: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

metí un rato con él un poco, y hay un par de cosas, en conjunto, que les hizo el mismo aspecto para mí en IE7 y Firefox 2. Las dos cosas que tenía que hacer fueron los siguientes:

a) añadir display:block; al estilo de la celda de tabla (hizo Firefox hacen que la altura de la celda de la misma manera como lo hizo IE);

b) que se añade un espacio de no separación a la célula (de lo contrario IE no mostraba las fronteras).

No tengo IE8 o Firefox 3 cargados, pero puede darle una oportunidad. No estoy seguro si hay efectos secundarios a los cambios de la pantalla para bloquear, pero no resuelve el problema.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top