显然，在垂直排列上有些错误。嗯，也不算错误吧，这是正确的表现，只不过不是我们想要的效果。

这是因为每个 <li> 元素的基线是和其父元素 <ul> 的基线对齐排列的。你要问啥是基线？一图顶千言那：

基线就是横贯上面文本的黑线。尽量说的简单点。inline 或者 inline-block 元素默认的 vertical-align 值 就是基线。也就是说元素基线要和她父元素的基线对齐。下面有一个示例：

就如所看到的，每个基线都是和文本 ‘This is the baseline.’ 的基线对齐的。文本虽然不在 <li> 内部，但是文本节点的父元素 <ul> 就指出了父元素的基线所在。

总之，修正方法是很简单的： vertical-align: top，这样就能得到一个看起来不错阿网格：

但是在 Firefox 2, IE 6 和 7 中，依然无效：

出处：前端观察
责任编辑：bluehearts

上一页 跨浏览器的inline-block [1] 下一页 跨浏览器的inline-block [3]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。