申明：IE7無法測試，所以下面說的IE6指IE6和IE7
1,遇到的問題
今天在查看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間隙
2，inline元素 inline-block 測試
<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間隙外，其他都是如下效果
3，block元素 inline-block 測試
<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 表現和 現代瀏覽器 表現不一樣，也就是我們常說的兼容性
4，inline-block在IE6和現代瀏覽器兼容性
為什么會出現這種情況呢？經過查找發現一個 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顯示的*/}
完美解決且無間隙
5，inline-block出現的原因
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>
可能有多種方法，我寫了個人認為兩種最可靠的
W3C推薦 導航方法（兼容IE6等）
<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緊挨着即可，不要留空格等間隙
后續的：
因為在使用中，經常會給導航一個1000px寬度，居中，這個時候就會出現一個padding 和 高度 不相同，一個兼容性，於是用了另一個方法
<style type="text/css">
body,div,ul,li{margin: 0; padding: 0; }
ul,li{list-style: none;}
a{text-decoration: none;}
h1{width: 1000px; margin:0 auto;}
.nav{width: 1000px; margin:0 auto; }
.nav a{display: inline-block; height:40px; padding: 0 25px; background: red;line-height: 40px;background: red;}
.nav li{display: inline;}
.nav a:hover{background: green;color:#fff;}
</style>
</head>
<body>
<!-- ul 設定寬度后，與a標簽的高度會有一個 4px或8px的間隙，造成兼容性-->
<h1>導航一</h1>
<ul class="nav">
<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>
參考文章：
什么是IE的haslayout
inline-block 前世今生
去除inline-block元素間間距的N種方法