【解决】Display:inline-block兼容性解决
栏目分类：DIV+CSS教程 发布日期：2015-05-07 来源： 浏览次数：次
在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了 display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置 disp
在IE6、IE7中不识别 display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了 display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置 display:inline- block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了 layout，而它本就是行布局，所以触发 后，块元素依然是行布局。IE8识别display:inline-block;
CSS:
在 IE6、IE7中实现块元素的inline-block效果有以下两种方法：
1先使用display:inline-block属性触发layout，然 后再定义display:inline让块元素呈现内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典BUG)。
2 直接将块元素设置为display:inline呈现为内联对象，然后触发layout(如zoom:1)。
行内元素 display:inline-block
| ie6&ie7 | ie8&ie9 | Firefox | Chrome | Safari | Opera | |
| font-size:0 | N- | Y | Y | Y | N- | Y |
| word-spacing:负值 | Y（2） | Y | Y | N | N | Y |
| letter-spacing:负值 | N* | Y | Y | Y | Y | N |
块级元素 display:inline-block
| ie6&ie7 | ie8&ie9 | Firefox | Chrome | Safari | Opera | |
| font-size:0 | Y | Y | Y | Y | N- | Y |
| word-spacing:负值 | Y（1） | Y（1） | Y（1） | N | N | Y（1） |
| letter-spacing:负值 | Y（1） | Y（1） | Y（1） | Y（2） | Y（2） | N |
【解决方案】
行内元素 display:inline-block
HTML：
1 |
<span style="font-size:14px;"><div class="item-list"> |
2 |
<a href="#">行内元素a</a> |
3 |
<a href="#">行内元素a</a> |
4 |
</div></span> |
01 |
<span style="font-size:14px;">.item-list { |
02 |
font-size:0; |
03 |
*word-spacing:-0.18em;/*这里是定值，不需要随字体类型、大小而变化*/ |
04 |
} |
05 |
|
06 |
.item { |
07 |
font-size:12px;/*or other value*/ |
08 |
display:inline-block; |
09 |
*word-spacing:normal; |
10 |
} |
11 |
|
12 |
@media screen and (-webkit-min-device-pixel-ratio:0){ |
13 |
.item-list {letter-spacing:-1em;}/*just target safari，因为font-size:0时，此条对chrome无效*/ |
14 |
} |
15 |
}</span> |
块级元素display:inline-block
html：
1 |
<span style="font-size:14px;"><div class="item-list"> |
2 |
<div class="item">块级元素div</div> |
3 |
<div class="item">块级元素div</div> |
4 |
</div></span> |
css：
01 |
<span style="font-size:14px;">.item-list { |
02 |
font-size:0; |
03 |
} |
04 |
|
05 |
.item { |
06 |
font-size:12px;/*or other value*/ |
07 |
display:inline-block; |
08 |
*display:inline; |
09 |
*zoom:1; |
10 |
} |
11 |
|
12 |
@media screen and (-webkit-min-device-pixel-ratio:0){ |
13 |
.item-list {letter-spacing:-1em;}/*just target safari，因为font-size:0时，此条对chrome无效*/ |
14 |
} |
15 |
}</span> |
另解决方法（未测试）：
在ie6,ie7里标签div这种外层的标签是无法支持display:inline-block;的而a,span这种内嵌标签是可以的，解决办法是
1 |
div { display:inline-block;} |
2 |
div { display:inline;} |
相关热词：css教程