img с {display: table-cell} - это ошибка?
Я хочу использоватьdisplay: table-* Свойства CSS для форматирования списка фотографий. Я полагаю, что ниже приведена «правильная» его реализация, поскольку в этом нет ничего теоретически неправильного, но она отображается в Firefox и Safari с разбитой таблицей, как вы можете видеть по границам. Для сравнения попробуйте обернуть оба тега img ниже в<div></div>; это отображается правильно.
Это что-то особенное для тега img, возможно, насколько оно велико по сравнению с тем, сколько места он фактически занимает. Это ошибка?
Код ниже является минимальной провокацией этой проблемы.
<!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>