HTML5：圖片中左邊的「顯示：表單元格」元素下推鑑於這一點小提琴右元素

Question

內容：http://jsfiddle.net/5Sw3h/8/

我有一個導航面板的左側，一個內容面板的中心，並給予在右邊還有一個小空間。這些放置使用「display：table，display：table-cell」語義。

我目前正在體驗到，將內容放入左側面板中似乎將內容面板中的內容向下推進了一些內容，主要是爲了內容中的圖像。不過，它似乎總是將內容略微推下來。

我已經嘗試過在很多元素上設置填充爲0的東西（因爲我第一次認爲是這樣），然後我嘗試了內容框的垂直對齊，一些相對定位定義了「頂部」。但沒有什麼真的有幫助...

我知道我一定忽略了一些明顯的東西，就是找不到它。

任何人都可以幫我找到我失蹤的東西嗎？

Answer 1

如果您有display: table-cell，請添加vertical-align: top。

vertical-align的初始值是baseline，這是導致錯位的原因。

Answer 2

thirtydot已經提供了一個很好的答案。但是，您將在Safari和Opera中遇到新問題，因此最好確保已將寬度設置爲所有表格元素。另一個問題是IE 6/7中的顯示錶格/表格單元支持，您可以使用由Danalin編寫的HTC腳本http://tanalin.com/en/projects/display-table-htc/。