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的其他方法）。