inline-block元素的4px空白間距解決方案

發(fā)布時(shí)間：2012-12-24 15:15:16 作者：佚名

有關(guān)于使用inline-block來代替float的討論也蠻多的，最常說的就是使用inline-block來代替float進(jìn)行布局，或者使用inline-block來實(shí)現(xiàn)元素的居中效果;那么今天我們就一起來說說這個(gè)“4px”的問題,需要了解的朋友可以參考下

有關(guān)于使用inline-block來代替float的討論也蠻多的，最常說的就是使用inline-block來代替float進(jìn)行布局，或者使用inline-block來實(shí)現(xiàn)元素的居中效果。前面《CSS3制作的分頁導(dǎo)航》一文中就是使用的inline-block制作的居中效果，不過留下了一上問題，就是使用inline-block的元素之間會(huì)存在“4px”的空白間距。那么今天我們就一起來說說這個(gè)“4px”的問題。

HTML Markup

復(fù)制代碼

代碼如下:

CSS Code

復(fù)制代碼

代碼如下:

*{
margin: 0;
padding: 0;
}
ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}

上面的demo效果，明顯的可以看出，在inline-block的元素之間存在“4px”的空白：

上面截圖是：IE8-9、Firefox、Safari等瀏覽器下的效果，換句話說，這種現(xiàn)像只有在這幾種瀏覽器中才會(huì)出現(xiàn)。下面我們就來說說解決這個(gè)“4px”(Chrome下是8px)的幾種方法：

方法一：改變HTML結(jié)構(gòu)

簡單一點(diǎn)的方法就是就是改變HTML的結(jié)構(gòu)，你可以使用下面幾種方法的任何一種都可以達(dá)到效果：

結(jié)構(gòu)一：

復(fù)制代碼

代碼如下:

這種方法接近標(biāo)簽換行格式的寫法，也更趨近閱讀。

結(jié)構(gòu)二：

復(fù)制代碼

代碼如下:

結(jié)構(gòu)二和結(jié)構(gòu)一幾乎是一樣，結(jié)束標(biāo)簽的“>”成了另一行的起始標(biāo)簽。

結(jié)構(gòu)三：

復(fù)制代碼

代碼如下:

結(jié)構(gòu)三的方法采用的是html的注釋的方法，這種方法我想大家不太常見，不過同樣能解決我們需要解決的問題。

結(jié)構(gòu)四：

復(fù)制代碼

代碼如下:

結(jié)構(gòu)四，我想是大家常用來解決這樣的問題的方法吧，下面我們來看看按上述幾種方法寫的效果：

方法一所說的是通過標(biāo)簽來解決，雖然問題是解決了，但可以說不能稱作是技巧。而且上面的方法只適合于寫靜態(tài)頁面的時(shí)候，一旦你的HTML不是自己寫，而是后臺(tái)生成，就比如CMS來說，標(biāo)簽后臺(tái)生成，此時(shí)，我想大家又要罵街了，這可怎么辦？其實(shí)我們除了上面的方法，還可以使用CSS來解決的。

方法二：負(fù)的margin

很多地方討論使用負(fù)的margin來解決，比如說：

復(fù)制代碼

代碼如下:

ul {
font-size: 12px;
}
ul li {
margin-right: -4px;
*margin-right: 0;
}

這種解決方法并不完美，如果你的父元素設(shè)置的字號(hào)不一樣，可能你的“-4px”就不能解決問題。況且在Chrome中你需要另外設(shè)置一個(gè)負(fù)的margin值才能實(shí)現(xiàn)同等的效果。

當(dāng)然有些文章介紹使用"-0.25em"來解決，這也是跟元素的字號(hào)有極大的關(guān)系。所以我個(gè)人建議不使用負(fù)的margin來解決這樣的問題。

方法三：設(shè)置父元素字體為0

第三種方法設(shè)置父元素的字體為“0”，然后在“inline-block”元素上重置字體需要的大小。

復(fù)制代碼

代碼如下:

ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 0px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
font-size: 12px;
}

這樣處理在Firexfox,chrome等瀏覽器下是達(dá)到了效果，可是在Safari下可問題依然存在：

按此來說，方法三也不是絕佳的好方法，用不用大家自己考慮。

方法四：丟失結(jié)束標(biāo)簽

說實(shí)在的，這種方法又回到了方法一，在html標(biāo)簽上動(dòng)手腳。就是讓“inline-block”元素丟失關(guān)閉標(biāo)簽

復(fù)制代碼

代碼如下:

樣式基本不變，我們來看看效果：

這種方法雖然能達(dá)到各瀏覽器的兼容，但還是有一個(gè)前提，那就是“DOCTYPE”要選擇對(duì)，在“XHTML”下可就問題又出來了。

方法五：jquery方法

最后在給大家提供一種jquery的方法：

HTML Markup

復(fù)制代碼

代碼如下:

CSS Code

復(fù)制代碼

代碼如下:

ul {
list-style: none outside none;
padding: 10px;
background: green;
text-align: center;
font-size: 12px;
}
ul li {
display: inline-block;
*display: inline;
zoom: 1;
background: orange;
padding: 5px;
}

jQuery Code

復(fù)制代碼

代碼如下:

$('.removeTextNodes').contents().filter(function() {
return this.nodeType === 3;
}).remove();

最后一種方法是通過jQuery來改變“nodeType”的值，從而實(shí)現(xiàn)我們需要的效果。

上面講述了多種方法，但要兼容多個(gè)瀏覽器版本，并不每種方法實(shí)用，以前常用的方法，這次測(cè)試并不兼容所有瀏覽器。要做到兼容所有瀏覽器，個(gè)人認(rèn)為還是在html的標(biāo)簽上做一定的處理，或者采用最后一種方法，通過“jQuery”來改變“nodeType”值達(dá)到效果。針對(duì)這個(gè)“inline-block”之間的間距有幾篇文章做過介紹，但里面的方法，和上面介紹的測(cè)試的基本一樣，具體如何運(yùn)用，大家還是根據(jù)自己的需求進(jìn)行選擇或處理。
那么有關(guān)于“inline-block”的間距如何去除，今天就扯到這了，希望這篇文章對(duì)喜歡用inline-block的童鞋有所幫助。如果您有更好的方法，記得與我們一起分享，歡迎在下面的評(píng)論中留下您的經(jīng)驗(yàn)，或者指正上面的不對(duì)之處。

復(fù)制代碼

代碼如下:

.finally-solve {
letter-spacing: -4px;/*根據(jù)不同字體字號(hào)或許需要做一定的調(diào)整*/
word-spacing: -4px;
font-size: 0;
}
.finally-solve li {
font-size: 16px;
letter-spacing: normal;
word-spacing: normal;
display:inline-block;
*display: inline;
zoom:1;
}