PS设计教程网欢迎你!

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

文章来源于 前端观察,感谢作者 糖伴西红柿 给我们带来经精彩的文章!
设计教程/前端设计/前端设计2009-10-27
篇文章所讲的也是非常使用的技术,其中牵涉到其他的技术,也需要大家有所了解。正好糖伴西红柿这两天也在看这方面的资料,提供一些资料给大家参考。

啊,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 中,依然无效:

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

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa