img con {display: table-cell} - ¿es un error?

Question

Dec 30, 2009, 01:21 AM

img con {display: table-cell} - ¿es un error?

Quiero usar eldisplay: table-* Propiedades de CSS para formatear una lista de fotos. Creo que a continuación hay una implementación "correcta" de la misma, en que no hay nada teóricamente incorrecto, pero se muestra en Firefox y Safari con el diseño de la tabla estropeado, como se puede ver en los bordes. Para una comparación, intente envolver ambas etiquetas img a continuación en una<div></div>; esto se muestra correctamente.

Esto es algo específico de la etiqueta img, tal vez lo grande que piensa que es en comparación con la cantidad de espacio que realmente ocupa. ¿Es esto un error?

El siguiente código es una provocación mínima de este problema.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .photos {display: table; border-collapse: collapse;}
            .photos > div {display: table-row}
            .photos > div > * {
                display: table-cell;
                vertical-align: top;
                border: 1px solid #000;
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div class="photos">
            <div>
                <p>Hello World</p>
                <img src="http://www.freeimages.co.uk/galleries/nature/weather/thumbs/frost_oak_leaf_winter_218310.jpg" />
            </div>
            <div>
                <p>Hello World</p>
                <img src="http://www.freeimages.co.uk/galleries/nature/weather/thumbs/frost_oak_leaf_winter_218310.jpg" />
            </div>
        </div>
    </body>
</html>