html行內元素轉換為inline-block元素換行產生邊距

標籤：

今天再次遇到行內元素轉換為inline-block後換行產生距離的問題（也許不止有行內元素，其他的沒有遇到），然後就找了一個解決辦法，原文可以參考http://www.cnblogs.com/PeunZhang/archive/2012/09/28/2706094.html

我也總結一下

結構：
<div class="span-wrap">
<span>字元產生間距</span>
<span>字元產生間距</span>
<span>字元產生間距</span>
<span>字元產生間距</span>
<span>字元產生間距</span>
<span>字元產生間距</span>
</div>

樣式：
html{
　　-webkit-text-size-adjust:none;/* 使用webkit的私人屬性，讓字型大小不受裝置終端的調整，可定義字型大小小於12px */
}
.span-wrap {
font-size:0;/* 所有瀏覽器 */
*word-spacing:-1px;/* 使用word-spacing 修複 IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔） */
}
.span-wrap span{
font-size: 12px;
letter-spacing: normal;/* 設定字母、字間距為0 */
word-spacing: normal; /* 設定單詞、欄位間距為0 */
}

html行內元素轉換為inline-block元素換行產生邊距