1. inline元素的display:inline-block,
ie6的截图如下
inline元素:display:inline-block;
ie6-1.jpg
.span{
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #007aff;
text-align: center;
font-size: 18px;
}
测试表明:IE6 中 inline 元素只要触发了 hasLayout 其表现就类似于 inline-block,这里设置 display:inline-block; 或者 zoom:1; 等其他属性值可以触发 hasLayout ,表现出来是一样的。
2)block 元素 display:inline-block
ie6截图如下:
block元素:display:inline-block;
ie6-2.jpg
.span{
display: inline-block;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #007aff;
text-align: center;
font-size: 18px;
}
测试表明:IE6 中 block 元素即使触发了 hasLayout 也不能具有 inline-block 元素不换行的特性。想要 block 元素支持 inline-block 元素的特性,我们可以这样做:
.span{
display: inline;
*zoom:1;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #007aff;
text-align: center;
font-size: 18px;
}
首先让 block 元素转化为 inline 元素,强制其不换行;然后通过 zoom:1 触发 hasLayout,使其可以设置宽高。修复后的 截图如下:
block元素:display:inline-block;
ie6-3.jpg
结合现代的浏览器,我们可以给出一下代码,
.span{
display:inline-block;
*display: inline;
*zoom:1;
width: 100px;
height: 40px;
line-height: 40px;
background-color: #007aff;
text-align: center;
font-size: 18px;
}
写到这里代码完美了么???呵呵,,你们又想多了,,这个发现在所有浏览器里,,元素使用inline-block属性会有间隙,ie6下inline元素会有间隙,截图如下:
chrome-1.jpg
ie6-4.jpg
既然有缝隙那就去掉缝隙啊。。我的做法如下:
在是有inline-block元素的父级添加:
.wrap{
font-size:0;
word-spacing:-1px;
}
chrome-2.jpg
ie6-5.jpg
一切正常了,想知道为什么有间隙,去掉间隙的原理,请移步这里查看更多。