baseline的浏览器差异

 

   

    网上搜了一些介绍baseline的文章，感谢网友的分享，baseline相当于我们平时做英语作业，作业本上每一行都有四条线，每个英文都基于第三条线来写的，我们称之为基线，网页显示文字的时候也一样，默认是以baseline对齐。

    如图

 

    浅蓝色线就是baseline，就如我们的英语作业本每一行的倒数第二根线

    浏览器的文字以baseline为基准对齐，当然可以设置其他对齐方式，具体请查看vertical-align属性介绍http://www.w3school.com.cn/css/pr_pos_vertical-align.asp。

     

     vertical-align只在inline和inline-block元素上应用，应为这些元素需要排列在一行。

   

    那么在一行里，inline-block元素是如何跟文字对齐呢？

    现代浏览器几乎都按baseline来对齐inline-block元素，     

    但是IE6/7对inline-block并不 以baseline对齐，它以文字最底端对齐，和img不一样。

 

 

   对于inline-block和inline元素都可以通过vertical-align设置对齐方式，其默认值为baseline。

 

   我们再看看inline-block元素，

 

   在IE8/9、Firefox、opera、chrome 表现一致

 

    就如阶梯上升，对于外部容器，inline-block元素的baseline在内容的最后一行。

    但当在inline-block元素添加overflow属性之后，baseline变为元素的底部，除了chrome

 

 

    Chrome并不受overflow影响

 

 

   这些问题都可以通过设置vertical-align来对齐。

   设置vertical-align:top;

     Chrome如下

 

IE6/7/8/9、Firefox、opera如下

 

    关于消除inline-block水平排列时候出现的间隙，请看http://ued.taobao.com/blog/2012/08/inline-block/。