淺談inline-block及解決空白間距

發(fā)布時(shí)間：2013-03-28 16:05:59 作者：佚名

inline-block 屬性的使用隨處可見(jiàn)，ie 從 5.5 開(kāi)始就已經(jīng)支持 display:inline-block 了，只是支持的并不是那么完美，接下來(lái)為大家詳細(xì)介紹下空白間隙是如何產(chǎn)生的，以及解決辦法，感興趣的朋友可以參考下哈

去掉display:inline-block元素間的多余空白

如下一段代碼，display:inline-block元素間的多余空白：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<style type="text/css">
*{margin:0; padding:0;}
body{font:12px/20px Tahoma, Geneva, sans-serif; padding:200px;}
img {border:0;}
ul li{ list-style:none;}
.test{width:200px; border:1px blue solid;}
.test a{width:32px; height:32px; display:inline-block; text-indent:-9999em; *text-indent:0; *line-height:0; *font-size:0; background:blue;} /* *號(hào)部分解決IE7 無(wú)法顯示 display:inline-block 元素里面的內(nèi)容，博客內(nèi)有文章介紹 */
</style>
<div class="test">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>

運(yùn)行截圖：

會(huì)發(fā)現(xiàn) 每1個(gè)帶display:inline-block;屬性的鏈接 a 水平、垂直方向都帶有一定的空白

解決方法：

方法1(附注釋說(shuō)明)：

CSS Code復(fù)制內(nèi)容到剪貼板

.test{width:200px; border:1px blue solid; font-size:0;}
.test a{width:32px; height:32px; display:inline-block; text-indent:-9999em; *text-indent:0; *line-height:0; *font-size:0; background:blue; vertical-align:top;} /* *號(hào)部分解決IE7 無(wú)法顯示 display:inline-block 元素里面的內(nèi)容，博客內(nèi)有文章介紹 */
/* display:inline-block元素的父元素定義 font-size:0 ,可去掉元素水平4px的空白，子元素若要顯示文字可重新定義font-size屬性即可 */
/* display:inline-block元素本身定義 vertical-align 屬性可去掉元素垂直方向的多余空白*/

關(guān)鍵在于父元素定義font-size:0 去掉行內(nèi)塊元素水平方向空白；子元素定義vertical-align 屬性去掉行內(nèi)塊元素垂直方向空白！
如果標(biāo)簽a內(nèi)加上任意文字，則display:inline-block元素不會(huì)生成垂直方向有空白！

方法2(附注釋說(shuō)明)：

通過(guò)設(shè)置父元素 letter-spacing來(lái)解決的,該屬性的值同字體有關(guān)：如：.test{letter-spacing:-.25em} 要注意的是-.25em是字體設(shè)置為Arial時(shí)的情況，為其他字體時(shí)會(huì)有些不同，下面僅列出了常用的幾個(gè)，常用字體與letter-spacing的關(guān)系：

復(fù)制代碼

代碼如下:

宋體/Verdana -.5em
Arial -.25em
Tahoma -.333em

方法2未經(jīng)實(shí)驗(yàn)，備忘！

如今有很多網(wǎng)站都用上了 inline-block 屬性，比如 {display:inline-block; *display:inline; *zoom:1}，以上 css 代碼隨處可見(jiàn)。很多人看見(jiàn) *display:inline; *zoom:1 就下意識(shí)的認(rèn)為：哦，原來(lái) inline-block 這個(gè)屬性 ie6 和 ie7 不支持。那么 ie6,7 真的不支持 display:inline-block 嗎？

事實(shí)上，ie 從 5.5 開(kāi)始就已經(jīng)支持 display:inline-block 了，只是支持的并不是那么完美。具體的請(qǐng)閱讀淘寶UED官方博客——一絲所寫的《display:inline-block 前世今生》。

當(dāng)我們使用 inline-block 的時(shí)候，就會(huì)產(chǎn)生“空白間隙”問(wèn)題。代碼如下：

復(fù)制代碼

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
li{
display:inline-block;
*display:inline;
*zoom:1;
}
</style>
</head>
<body>
<ul>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
</ul>
</body>
</html>

效果圖如下：

我們可以看到：在 ie8、chrome、firefox、opera 以及 safari 瀏覽器下，兩張圖片之間有“空白間隙”。

但是在 ie6 和 ie7 瀏覽器下卻正常顯示，效果如下：

下面我們就來(lái)說(shuō)說(shuō)這個(gè)“空白間隙”是如何產(chǎn)生的，以及解決辦法。

先來(lái)說(shuō)說(shuō)“空白間隙”是怎么產(chǎn)生的？先看下源代碼：

復(fù)制代碼

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
li{
display:inline-block;
*display:inline;
*zoom:1;
}
</style>
</head>
<body>
<ul>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
</ul>
</body>
</html>

從上面的代碼我們很難發(fā)現(xiàn)產(chǎn)生“空白間隙”的問(wèn)題。其實(shí)這個(gè)問(wèn)題是我們寫代碼的習(xí)慣所造成的。平時(shí)我們寫代碼，為了使代碼看上去“層級(jí)分明”，通常會(huì)在標(biāo)簽結(jié)束符后順手打個(gè)回車，而回車會(huì)產(chǎn)生回車符，回車符相當(dāng)于空白符，通常情況下，多個(gè)連續(xù)的空白符會(huì)合并成一個(gè)空白符，而產(chǎn)生“空白間隙”的真正原因就是這個(gè)讓我們并不怎么注意的空白符。

既然我們已經(jīng)知道產(chǎn)生問(wèn)題的原因了，那么就很好解決該問(wèn)題?？瞻追彩亲址?，只要是字符就會(huì)聯(lián)想到字體，字體大小之類的。所以去除空白符的存在只需要設(shè)置字體大小為零就行了（font-size:0;）。修改已上代碼：

復(fù)制代碼

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
ul{
font-size:0;
}
li{
display:inline-block;
*display:inline;
*zoom:1;
}
</style>
</head>
<body>
<ul>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
</ul>
</body>
</html>

可以看到在 ie8，firefox，chrome 和 opera 瀏覽器下已經(jīng)沒(méi)有問(wèn)題了，但是在 safari 瀏覽器下還是有問(wèn)題。

關(guān)于 safari 瀏覽器的兼容，請(qǐng)閱讀大漠寫的《如何解決inline-block元素的空白間距》。

最后整理：

復(fù)制代碼

代碼如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<title>inline-block</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all"/>
<style type="text/css">
ul{
font-size:0;
letter-spacing: -8px;/*根據(jù)不同字體字號(hào)或許需要做一定的調(diào)整*/
word-spacing: -8px;
}
li{
display:inline-block;
*display:inline;
*zoom:1;
letter-spacing:normal;
word-spacing:normal;
}
</style>
</head>
<body>
<ul>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
<li><img src="images/cat.jpg" alt="" width="248" height="162"/></li>
</ul>
</body>
</html>

測(cè)試瀏覽器：ie6，ie7，ie8，chrome，firefox，safari，opera。

Tag：空白間距 block inline

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談inline-block及解決空白間距

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容