inline-block去掉空白距離方法

自己寫的測試案例剛開始發現居然沒有空白的距離，后來請教才發現原來是因為沒有換行的原因。注意只有inline-block換行了才會出現空白距離的問題。而且任何元素和標簽只要在html里面進行了換行，顯示在瀏覽器的會后就都會有間距。

原型是：

ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;}

<ul class="test1">
    <li>關於我們</li>
    <li>客戶服務</li>
    <li>招聘信息</li>
    <li>隱私聲明</li>
</ul>

有空白距離的效果：

解決方法有：

第一種方法：加上 font-size:0; 和  font-size:12px; 不兼容safari瀏覽器，用行內元素李歡li，ie6下面中間有右間距1像素。

ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;font-size:0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;font-size:12px;}

第二種方法：改變html結構，都兼容

<ul class="test1">
    <li>
    關於我們</li><li>
    客戶服務</li><li>
    招聘信息</li><li>
    隱私聲明
    </li>
</ul>

或者

<ul class="test1">
    <li>關於我們</li
    ><li>客戶服務</li
    ><li>招聘信息</li
    ><li>隱私聲明</li>
</ul>

第三種，父元素中設置font-size:0,用來兼容chrome，firefox等瀏覽器，而使用letter-space:-N px來兼容safari:都兼容

ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;letter-spacing: -4px;/*根據不同字體字號或許需要做一定的調整*/
  word-spacing: -4px;
  font-size: 0;}
ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;letter-spacing: normal;word-spacing:normal;font-size:12px;}

 

ps:注意：列表顯示這些元素如果用塊元素、行內元素，在除去了邊距之后，在ie6顯示下面會有1像素的差別，且是在使用font-size：0；和font-size：12px;這種方法的時候出現，用第二種和第三種都不出現這種差異。

以下是行內元素的時候的代碼：

p.test3{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;font-size:0;}
p.test3 span{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5px;font-size:12px;}

<p class="test3">
  <span>關於我們</span>
  <span>客戶服務</span>
  <span>招聘信息</span>
  <span>隱私聲明</span>
</p>

so,總結下來，

1、可以不換行的時候就不要換行

2、萬一要換行，能改結構的時候就不要用css

3、用css的時候建議用第三種辦法，並且注意要用塊元素，不要用行內元素。