HTML5：左侧“display：table-cell”元素中的图像下推右侧元素中的内容

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 中的显示表格/表格单元支持，您可以在此处使用由 Tanalin 编写的 HTC 脚本http://tanalin.com/en/projects/display-table-htc/。