baseline的浏览器差异

6 篇文章 0 订阅

 

   

    网上搜了一些介绍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/7inline-block并不 baseline对齐,它以文字最底端对齐,和img不一样。



 

 

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

 


   我们再看看inline-block元素,

 

   在IE8/9Firefoxoperachrome 表现一致



 

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

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



 

 

    Chrome并不受overflow影响



 

 

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

   设置vertical-align:top;

     Chrome如下

 

IE6/7/8/9Firefoxopera如下



 

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

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值