【解决】Display:inline-block兼容性解决
在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无效*/
}
}[相关链接]：display:inline-block在IE6/Ie7和IE8中的区别 谈谈inline-block元素间隙问题
另解决方法（未测试）：
在ie6,ie7里标签div这种外层的标签是无法支持display:inline-block;的而a,span这种内嵌标签是可以的，解决办法是
div { display:inline-block;}
div { display:inline;}
阅读本文后，您的心情是：
恶心
愤怒
强赞
感动
路过
无聊
雷囧
关注
