學(xué)習(xí)總結(jié)：

間隙是如何產(chǎn)生的：換行符，tab(制表符)，空格符等造成的

如何去除(方法之一)：用font-size:0px來消除換行符，tab(制表符)，空格符等造成的影響

但要注意:

1.IE6，IE7瀏覽器當(dāng)設(shè)置font-size：0時(shí)，換行符、tab（制表符）、空格始終存在1px的空隙?
?? ??? ?2.最新版本的Safari瀏覽器，Chrome瀏覽器不支持字體大小為0的瀏覽器
?? ??? ?
?? ??? ?通過查找資料后，一種比較正常的解決方法如下：
?? ??? ?
?? ??? ?1.針對(duì)IE6、7瀏覽器，使用word-spacing 修復(fù) IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔）?
?? ??? ?word-spacing:-1px;
?? ??? ?
?? ??? ?2.使用webkit的私有屬性，讓字體大小不受設(shè)備終端的調(diào)整，可定義字體大小小于12px?
?? ??? ?html{-webkit-text-size-adjust:none;}

使用方法

HTML

<div class="span-wrap">
?? ??? ? ? ?<span>行內(nèi)元素</span>
?? ??? ? ? ?<span>行內(nèi)元素</span>
?</div>

CSS：

html{
?? ??? ??? ?-webkit-text-size-adjust:none;/* 使用webkit的私有屬性，讓字體大小不受設(shè)備終端的調(diào)整，可定義字體大小小于12px */
?? ??? ?}
? ? ? ?.span-wrap {
? ??? ??? ??font-size:0;/* 所有瀏覽器 */
? ? ?? ??? ?word-spacing:-1px;/* 使用word-spacing 修復(fù) IE6、7 中始終存在的 1px 空隙，減少單詞間的空白（即字間隔） */
?? ??? ?}
??? ??? ?.span-wrap span{
?? ??? ? ? ?font-size: 12px;
?? ??? ? ? ?letter-spacing: normal;/* 設(shè)置字母、字間距為0 */
?? ??? ? ? ?word-spacing: normal; /* 設(shè)置單詞、字段間距為0 */
??? ??? ?}

?

總結(jié)

以上是生活随笔為你收集整理的行内元素之间产生的间隙的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。