inline-block不一样的用处

今天遇到一个问题,说的就是很多个链接,类是友情链接的东西,一并都在一块。然后要让他们换行输出,但是有几个不兼容的问题:

一是,不同操作系统所采用的字体不同时,每个字体对应的宽度就不确定,然后它到底会不会溢出是未知的。

二是,每种浏览器的显示是有差别的,字体这个东西很难去精确定宽的,除非采用em设定宽度(但是对于中栏固定宽度来说,几乎没有人会去采用em设定宽度的)。

三是,像有些网站一样,他们用<br />去换行输出,当然这种做法本身没错,但是当下回再添加一个链接时就需要每个浏览器都去看一遍,是不是溢出了,或者布局错乱了?

所以可以考虑使用inline-block去做。

这里我采用了京东商城的最底部链接:

其实IE对于字体的处理是其他浏览器所不能匹及的。这里我仅仅只是使用的display:inline-block并没有使用兼容ie6,7的方式(*display:inline;*zoom:1)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值