如何解決IE6/IE7不識(shí)別display:inline-block屬性

發(fā)布時(shí)間：2013-09-21 16:27:51 作者：佚名

ie6，ie7的haslayout屬性是個(gè)讓人頭疼的問題，想到一個(gè)屬性display:inline-block;對(duì)！inline- block就是干這個(gè)事的，讓一個(gè)元素既不換行又具有block元素的特性

ie6，ie7的haslayout屬性是個(gè)讓人頭疼的問題。在做導(dǎo)航條的時(shí)候，一般會(huì)用到ul li結(jié)構(gòu)，大多數(shù)時(shí)候我們是把li設(shè)置為浮動(dòng)，讓其并排顯示在同一行。還有一種方法就是設(shè)置li為display:inline;這樣可以達(dá)到同樣的效果，但是問題是inline元素的特性：默認(rèn)無(wú)法設(shè)置寬度，高度，以及上下margin，（關(guān)于padding，情況有點(diǎn)特殊，在ie6，7中 inline元素是無(wú)法設(shè)置上下padding的，但是在標(biāo)準(zhǔn)瀏覽器里面是可以設(shè)置上下padding的）。

鑒于inline元素的這種特性，如果我們不浮動(dòng)并且想讓li顯示在一行，而且可以設(shè)置高度，寬度以及上下margin，上下padding等屬性，應(yīng)該怎么辦呢？你一定會(huì)想到一個(gè)屬性display:inline-block;對(duì)！”inline- block”就是干這個(gè)事的，讓一個(gè)元素既不換行又具有block元素的特性。不過有點(diǎn)小問題.

在IE6、IE7中不識(shí)別display:inline-block屬性，加不加display:inline-block;對(duì)于它們完全沒有任何影響。那么讓我們來(lái)想辦法解決這個(gè)問題，這就涉及到ie6，7中的haslayout屬性了。ie6，7中的inline元素有個(gè)特殊的情況，就是觸發(fā)了ie的hasLayout屬性以后就擁有了layout。此時(shí)inline元素的表現(xiàn)和標(biāo)準(zhǔn)瀏覽器里面的inline-block元素基本相同。

看下面這個(gè)例子，我們用ie的私有屬性zoom來(lái)觸發(fā)hasLayout，然后看看inline元素的表現(xiàn)。

復(fù)制代碼

代碼如下:

<html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>display-block</title>
<style>
span {
width:200px;
height:50px;
margin:10px;
padding:20px;
background:#ccc;
zoom:1;
</style>
</head>
<body>
span 
</body> 
</html>

可以看到在ie6，7中inline元素span已經(jīng)表現(xiàn)得和一個(gè)display:inline-block元素一摸一樣了，但是在標(biāo)準(zhǔn)瀏覽器中span仍然是行內(nèi)元素（寬高以及上下margin都無(wú)效）。
如果聲明了不正確DTD，導(dǎo)致ie6在quirks 模式下解析，那么ie6會(huì)自動(dòng)觸發(fā)inline元素的haslayout，不過這里只討論正常情況下的解析，所以加了個(gè)zoom:1來(lái)觸發(fā)haslayout;zoom的值設(shè)置為除了auto外的任何值都會(huì)觸發(fā)haslayout，之所以經(jīng)常用zoom:1;是因?yàn)閦oom這個(gè)屬性本身是ie的縮放屬性，設(shè)置為其他值會(huì)導(dǎo)致元素在ie下變形，設(shè)置為1既是保持原形不縮放。
了解了上面的情況，我們就可以來(lái)解決之前那個(gè)問題了?？梢愿脑鹊腸ss代碼如下：

復(fù)制代碼

代碼如下:

li {
display:inline-block; /* firefox等標(biāo)準(zhǔn)瀏覽器識(shí)別*/ 
*display:inline; /* 只有ie6和ie7識(shí)別*/zoom:1; /* 觸發(fā)ie6和ie7下的haslayout */ 
width:80px; 
height:20px; 
margin:10px; 
padding:10px; 
text-align:center; 
background:#cfc; 
}
 讓標(biāo)準(zhǔn)瀏覽器識(shí)別display:inline-block;讓ie6，7識(shí)別display:inline;來(lái)覆蓋上面的display:inline-block;（我為什么要說”覆蓋”？）。然后通過zoom:1;來(lái)觸發(fā)haslayout讓inline元素在ie中表現(xiàn)得和inline-block元素一樣。

<pre name="code" class="html"><html xmlns=”http://www.w3.org/1999/xhtml”> </pre><pre name="code" class="html"><head> </pre><pre name="code" class="html"><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> </pre><pre name="code" class="html"><title>display-block</title> </pre><pre name="code" class="html"><style> </pre>
<pre name="code" class="html">ul {</pre>
<pre name="code" class="html">background:#ccc;</pre>
<pre name="code" class="html">padding:0;</pre>
<pre name="code" class="html">margin:0;</pre>
<pre name="code" class="html">list-style:none;</pre>
<pre name="code" class="html">} </pre>
<pre name="code" class="html">li {</pre>
<pre name="code" class="html">display:inline-block; </pre>
<pre name="code" class="html">*display:inline; </pre>
<pre name="code" class="html">zoom:1; </pre>
<pre name="code" class="html">width:80px; </pre>
<pre name="code" class="html">height:20px; </pre>
<pre name="code" class="html">margin:10px; </pre>
<pre name="code" class="html">padding:10px; </pre>
<pre name="code" class="html">text-align:center; </pre>
<pre name="code" class="html">background:#cfc;</pre>
<pre name="code" class="html"> } </pre>
<pre name="code" class="html"></style> </pre><pre name="code" class="html"></head> </pre><pre name="code" class="html"><body> </pre>
<pre name="code" class="html"><ul> </pre>
<pre name="code" class="html"><li>測(cè)試</li> </pre>
<pre name="code" class="html"><li>測(cè)試</li> </pre>
<pre name="code" class="html"><li>測(cè)試</li> </pre>
<pre name="code" class="html"><li>測(cè)試</li> </pre>
<pre name="code" class="html"></ul> </pre>
<pre name="code" class="html"></body> </pre><pre name="code" class="html"></html></pre>可以看到，現(xiàn)在在各瀏覽器里面的顯示已經(jīng)一致了。li元素都顯示在同一行。

<a target="_blank" >http://www.poluoluo.com/jzxy/201206/167493.html</a>