网上搜了一些介绍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/。