img with {display：table-cell} - 这是一个错误？ [英] img with {display: table-cell} -- is it a bug?
问题描述
我想使用 display：table - * css属性来格式化照片列表。我相信下面是一个正确的实现，因为它没有理论上的错误，但它显示在Firefox和Safari与表格布局搞砸，你可以看到边框。要进行比较，请尝试在< div>< / div> 中封装下面的img标签;这正确显示。
I want to use the display: table-* css properties to format a list of photos. I believe that below is a "correct" implementation of it, in that there's nothing theoretically wrong with it, but it displays in Firefox and Safari with the table layout screwed up, as you can see by the borders. For a comparison, try wrapping both img tags below in a <div></div>; this displays properly.
这是img标签的特定内容，也许它是多大的，它实际上需要多少空间。这是一个错误？
This is something specific to the img tag, perhaps how big it thinks it is versus how much space it actually takes. Is this a bug?
下面的代码是对这个问题的最小挑战。
The code below is a minimal provocation of this problem.
<!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>
推荐答案
问题似乎主要是由于border-坍方。如果你删除，对齐问题消失。我似乎找不到任何其他讨论这个问题在线，但我已经注意到边界崩溃：崩溃算法许多次在Firefox和Safari中的行（线消失/重现出来，你滚动，等）。这似乎只是该算法中的另一个错误。
The problem seems to be mostly due to the border-collapse. If you remove that, the alignment problem goes away. I can't seem to find any other discussion of this problem online but I have noticed bugs in the border-collapse: collapse algorithm many times in Firefox and Safari (lines that disappear/reappear as you scroll, etc). This appears to be just another bug in that algorithm.
你是正确的，但它是特定于图像，如果你将图像包装在divs，问题消失：
You're are right however, that it is specific to the image, if you wrap the images in divs, the problem goes away:
<html>
<head>
<style>
.photos {display: table; border-collapse: collapse;}
.photos > div {display: table-row; border-collapse: collapse;}
.photos > div > * {
border-collapse: collapse;
display: table-cell;
vertical-align: top;
border: 1px solid #000;
padding: 10px;
}
</style>
</head>
<body>
<div class="photos">
<div>
<p>Hello World</p>
<div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
<p>Hello World</p>
</div>
<div>
<p>Hello World</p>
<div><img src="http://www.studentsoftheworld.info/sites/music/img/23448_shopping_bags1.gif" /></div>
<p>Hello World</p>
</div>
</div>
</body>
</html>
我在Ubuntu和XP的Firefox 3.1，XP的Firefox 3.5，Safari 4的Wine和XP以及XP中的Chrome 3，他们都在渲染边框崩溃时显示错误。只有Firefox将图片表格单元格显示为一个像素低点。
I've tested this in Firefox 3.1 in Ubuntu and XP, Firefox 3.5 in XP, Safari 4 in Wine and XP, and Chrome 3 in XP and they ALL exhibit errors in rendering the border-collapse. Only Firefox shows the image table-cell as one pixel low.
Opera 9.22在XP中根本不显示图片。
Opera 10.10在XP中的行为与其余的一样。
Opera 9.52 in XP oddly does not display the image at all. Opera 10.10 in XP behaves like the rest.
也许有一些规范导致这么多浏览器解释这种方式。
Perhaps there's something about the spec that causes so many browsers to interpret this way.
这篇关于img with {display：table-cell} - 这是一个错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
