我想使用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>
解决方法
问题似乎主要是由于边境崩溃.如果删除它,对齐问题就会消失.我似乎无法在网上找到任何其他关于这个问题的讨论,但我注意到了边界崩溃中的错误：在Firefox和Safari中多次崩溃算法(在滚动时消失/重新出现的行等).这似乎只是该算法中的另一个错误.
但是,你是对的,它是特定的图像,如果你将图像包装在div中,问题就会消失：
<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,Wine和XP中的Safari 4以及XP中的Chrome 3中进行了测试,并且它们在呈现边界崩溃时都出现错误.只有Firefox将图像表格单元格显示为一个像素低.
XP中的Opera 9.52奇怪地根本不显示图像.
XP中的Opera 10.10表现得和其他人一样.
也许有一些关于规范的东西导致这么多浏览器以这种方式解释.
