成长脚印-专注于互联网发展

【解决】Display:inline-block兼容性解决

post by:天之骄子 2012-9-11 14:07

在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;

在 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：

<div class="item-list">
    <a href="#">行内元素a</a>
    <a href="#">行内元素a</a>
</div>

CSS:

.item-list {
    font-size:0;
    *word-spacing:-0.18em;/*这里是定值，不需要随字体类型、大小而变化*/
}
 
.item {
    font-size:12px;/*or other value*/
    display:inline-block;
    *word-spacing:normal;
 }
 
@media screen and (-webkit-min-device-pixel-ratio:0){
.item-list {letter-spacing:-1em;}/*just target safari，因为font-size:0时，此条对chrome无效*/
}
}

块级元素display:inline-block

html：

<div class="item-list">
    <div class="item">块级元素div</div>
    <div class="item">块级元素div</div>
</div>

css：

.item-list {
    font-size:0;
}
 
.item {
    font-size:12px;/*or other value*/
    display:inline-block;
    *display:inline;
    *zoom:1;
}
 
@media screen and (-webkit-min-device-pixel-ratio:0){
.item-list {letter-spacing:-1em;}/*just target safari，因为font-size:0时，此条对chrome无效*/
}
}

[推荐]：inline-block 前世今生[淘宝UED]

另解决方法（未测试）：

在ie6,ie7里标签div这种外层的标签是无法支持display:inline-block;的而a,span这种内嵌标签是可以的，解决办法是

div { display:inline-block;}
div { display:inline;}

评论：

发表评论：