Div显示内联块显示奇怪（CSS）

Question

我在一个模板上工作，我尝试使用display: inline-block;来排列页面上的div，我发现了一个我无法解释的行为。包含display: inline-block;，span或div等元素的a的div显示在下方，而不包含任何内容。

我看着Firebug，但是没有边缘或填充物可以解释间距。

仅当我将span，div或a显示为：

时，才会解决此问题

1. table-cell // Chrome Firefox IE9
2. table-row // Chrome Firefox IE9
3. flex //只有Firefox
4. table // Chrome Firefox IE9

有人可以提供更多详细信息或一些建议。

jsFiddle

Answer 1

将vertical-align: top添加到您的div，如下所示：

div {
    vertical-align: top;
}

小提琴演示：http://jsfiddle.net/85StK/5/

这使div的垂直对齐均匀化，使它们全部显示为内嵌。