标签：
今天在查看w3c网站时，发现w3c推荐的导航方法，给li 添加 display:inline-bock; 达到li 平衡排列，当是意想不到的发生了，每个li之间出现了间隙。于是开始下面的不断的测试。重要代码如下：
<style type="text/css">
body,div,h1,ul,li{margin:0; padding:0;}
ul,li{list-style:none;}
.nav a{background: red;color:#fff;padding: 5px 10px;}
.nav ul li{display:inline;}
</style>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">食品</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">夺宝岛</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">金融</a></li>
</ul>
</div>
总结：IE8及以上IE浏览器、火狐浏览器出现4px间隙，谷歌和IE6浏览器出现8px间隙
<style type="text/css">
body,div,h1,ul,li{margin:0; padding:0;}
ul,li{list-style:none;}
.nav a{background: red;color:#fff;padding: 5px 10px;}
.nav ul li{display:inline;}
a{display: inline-block;width:150px;background: red;}
</style>
<a href="#" class="a1">inline元素1</a>
<a href="#" class="a2">inline元素2</a>
结果：除谷歌8px间隙外，其他都是如下效果
<style type="text/css">
body,div,h1,ul,li{margin:0; padding:0;}
ul,li{list-style:none;}
.nav a{background: red;color:#fff;padding: 5px 10px;}
.nav ul li{display:inline;}
a{display: inline-block;width:150px;background: red;}
div{display: inline-block;width:150px;background: red;}
</style>
<div class="div1">block元素1</div>
<div class="div2">block元素2</div>
以上测试浏览器大都显示如下
总结：IE6下面 inline-block 表现和 现代浏览器 表现不一样，也就是我们常说的兼容性
为什么会出现这种情况呢？经过查找发现一个 haslayout 的东西，他是在IE8以前存在的。下面是hasLayout 的一些知识，haslayout 是IE在渲染过程中执行，元素的属性，它的值为true 和 false，跟许多的IE兼容性有关，不过在IE8之后就取消了这个属性，鉴于现在很少考虑IE6,7，所以这个东西我也没有再去深究，先解决目前问题。
也就是说，是IE独有的haslayout属性影响了 inline-block的表现，解决办法：设置 zoom:1; 触发 haslayout 属性，但是还不行，最终解决办法如下：
先设置为 inline样式，在触发 haslayout属性
div{display: inline-block;width:150px;background: red;*display:inline; *zoom:1;/*带*的是IE6、IE7显示的*/}
完美解决且无间隙
block元素下的inline-block样式间隙解决了，inline-block之间的间隙该怎么去除呢？
测试发现，inline元素，之间本身就存在间隙，是不是这个间隙引起的呢？
最终原因：inline元素中间的空白符引起的，解决办法：就是去掉空白符
第一种方法：除谷歌外的其他浏览器间隙是4px，使用margin:-4px; 唯独谷歌是 双倍的8px，需要给谷歌单独设置 margin:-8px;
@media screen and (-webkit-min-device-pixel-ratio:0) { div { margin-right: -8px; } }/*谷歌 HACK 方法*/
第二种方法：删除代码间的空白，例如下面两个a标签紧挨着
<a href="#" class="a1">inline元素1</a><a href="#" class="a2">inline元素2</a>
可能有多种方法，我写了个人认为两种最可靠的
<style type="text/css">
body,div,h1,ul,li{margin:0; padding:0;}
ul,li{list-style:none;}
a{text-decoration: none;}
.nav a{background: red;color:#fff;padding: 10px 20px;margin-right: -4px;line-height: 40px;*margin-right: -8px;/* ie 下面也是 -8px*/}
@media screen and (-webkit-min-device-pixel-ratio:0) { .nav a { margin-right: -8px; } }/*谷歌 HACK 方法*/
.nav ul li{display:inline;}
.nav a:hover{text-decoration: underline;}
</style>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">食品</a></li>
<li><a href="#">团购</a></li>
<li><a href="#">夺宝岛</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">金融</a></li>
</ul>
</div>
不使用hack方法的话，每个li紧挨着即可，不要留空格等间隙
inline-block间隙原因和解决方法（web前端问题）
标签：
原文地址：http://www.cnblogs.com/geek12/p/4317013.html
