主流浏览器兼容的基线对齐方法

啊，inline-block，挺难琢磨并且迷人的声明上承诺了很多，其实提供了很少。很多次我拿到类似这样的 PSD 文件：

就哭了。

一般说来，这种类型的布局是小菜一桩。固定宽度，固定高度，向左浮动就解决了。但是，这个设计中内容的多少是可变的，这就意味着如果这些块中的一些内容比其他的多，就会破坏这个布局。

因为第一个展示项比其他项高，第五个项目就相对第一个浮动，而不是位于它下面了。基本上我们想要一个弹性表格的布局，但是适当的，语义标记。

我们以一个无序列表开始这个简单的页面，并把 display 设置为 inline-block:

<ul>     <li>         <h4>This is awesome</h4>         <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"             </li> ... <ul>

<style> li {     width: 200px;     min-height: 250px;     border: 1px solid #000;     display: inline-block;     margin: 5px; } </style>

效果在 Firefox 3， Safari 3 和 opera 中看起来没问题：

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

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

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

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

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

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