display:inline-block 使用说明

一,内联元素下,使用inline-block,ie各版本都支持。(已测试)
二,块级元素下,使用inline-block,ie8 及其以上支持。
需要支持ie6及其以上

解决方案:zoom:1;display:inline-block;*display:inline;(已测试ie6,7,8,9)
注意顺序,有些blog说display:inline-block;与*display:inline;就行,但是经过测试display:inline-block;不足以在ie6,7下触发haslayout,是错误的,所以需要加zoom来出发。
以下有ff2的兼容方案


以下是网上说的
========================================================
display:inline-block; /*Firefox3 beta、IE8 beta、Opera、Safari 支持,IE 下触发 inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性,也可以用 -moz-inline-box */

zoom:1; /*IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/
http://www.planabc.net/2008/04/08/cross_browser_support_for_inline-block_styling/
========================================================
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值