li的inline-block出現間隙原因，解決方案

標籤：

<style type="text/css">body{margin:0 0;padding:0 0;font-size: 14;text-decoration:none;　　 }ul{  padding:0;
  margin:0;　　font-size:0px;　
}li{display:inline-block;font-size: 14px;min-height:50px;width:100px;*background-color:#c90;border:1px dotted red;display:-moz-inline-stack;/*Firefox2不支援inline-block屬性所以加Firefox專屬屬性，效果類似inline-block*/vertical-align:baseline;/*預設就是baseline,可以不設定，注意：一行內元素垂直方式為基準*/zoom:1;/*IE6,7 不支援屬性inline-block屬性，zoom:1是觸發IE元素的haslayout,使元素擁有布局，觸發後haslayout=-1,然後設定*dispaly:inline,IE6,7支援屬性前加（*）《專屬》，參考另一篇部落格 ，IE,6,7,haslayout=-1的情況下display:inline（內聯）,相當於其他瀏覽器下的line-block（區塊層級元素行內排列），按W3C標準，內嵌元素內不可出現區塊層級元素 */*display:inline;_height: 250px;/*IE 6 不支援min-height:250px;其他瀏覽器會忽略_height:，參考另一票部落格，IE6支援屬性前加（*或_） ,IE7支援屬性前加（*或+），其他瀏覽器則忽略 */}</style>

這種css 設定下li標籤行內排列時，相互之間出現間隙，

<body><div><ul><li><div>1</div></li><li><div>2</div></li><li><div>1</div></li><li><div>1</div></li><li><div>1</div></li><li><div>1</div></li><li><div>1</div></li></ul><div></body>

　　

由於字型的設定導致出線間隙，把父節點ul {font-size:0px;} 設定為0，然後li中重新設定字型大小則可以去掉之間的間隙。這種方法不支援safari瀏覽器，其他瀏覽器則相容。

所以我們加一些樣式來相容safari

li的inline-block出現間隙原因，解決方案