img com {display: table-cell} - é um bug?
Eu quero usar odisplay: table-*
Propriedades CSS para formatar uma lista de fotos. Acredito que abaixo está uma implementação "correta", já que não há nada teoricamente errado com isso, mas ele é exibido no Firefox e no Safari com o layout da tabela danificado, como você pode ver pelas bordas. Para uma comparação, tente envolver ambas as tags img abaixo em um<div></div>
; isso é exibido corretamente.
Isso é algo específico para a tag img, talvez o tamanho que ela acha que é e quanto espaço ela realmente ocupa. Isso é um inseto?
O código abaixo é uma provocação mínima desse 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>