CSS中的表格图像网格（但有一个扭曲）

Question

我想创建一个类似表格的图像网格。每个缩略图图像（大小和方向都不相同）都是以它自己的DIV为中心。每一行应该包含四个图像，在那之后我要自动的“线断开”的情况发生，造成封闭TD的规模，结果看起来像这样：

XXXX
XXXX
XX

下面的代码在Firefox，Opera，Safari，Chrome中按预期工作。但在Internet Explorer 7/8/9中遇到两个问题：

1）图像不是垂直居中的，它们坐在DIV的顶部。
2）“换行符”不会发生。图像的行消失，淡出人们的视线向右......

CSS：

.outer-div {display: inline; float:left; clear:right;} 

.inner-div 
{ 
width: 220px; 
height: 220px; 
display: table-cell; 
vertical-align: middle; 
} 

HTML：

<div class="outer-div"><div class="inner-div">img.jpg</div></div> 

Answer 1

你可以将其添加到.inner-div CSS：

*display:inline; 
zoom:1; 

我认为发生了什么是IE不承认display:table-cell，所以你需要使用黑客（或只告诉IE使用display:inline与zoom:1的其他方法）。