DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> DIV十CSS布局 >> 布局實例 >> 如何解決IE6/IE7不識別display:inline-block屬性
如何解決IE6/IE7不識別display:inline-block屬性
編輯:布局實例     

ie6,ie7的haslayout屬性是個讓人頭疼的問題。在做導航條的時候,一般會用到ul li結構,大多數時候我們是把li設置為浮動,讓其並排顯示在同一行。還有一種方法就是設置li為display:inline;這樣可以達到同樣的效 果,但是問題是inline元素的特性:默認無法設置寬度,高度,以及上下margin,(關於padding,情況有點特殊,在ie6,7中 inline元素是無法設置上下padding的,但是在標准浏覽器裡面是可以設置上下padding的)。

鑒於inline元素的這 種特性,如果我們不浮動並且想讓li顯示在一行,而且可以設置高度,寬度以及上下margin,上下padding等屬性,應該怎麼辦呢?你一定會想到一 個屬性display:inline-block;對!”inline- block”就是干這個事的,讓一個元素既不換行又具有block元素的特性。不過有點小問題.

在IE6、IE7中不識別 display:inline-block屬性,加不加display:inline-block;對於它們完全沒有任何影響。那麼讓我們來想辦法解決這 個問題,這就涉及到ie6,7中的haslayout屬性了。ie6,7中的inline元素有個特殊的情況,就是觸發了ie的hasLayout屬性以 後就擁有了layout。此時inline元素的表現和標准浏覽器裡面的inline-block元素基本相同。

看下面這個例子,我們用ie的私有屬性zoom來觸發hasLayout,然後看看inline元素的表現。
 

復制代碼 代碼如下:
<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><span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">span</span> </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"></body> </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"></html></span>


可以看到在ie6,7中inline元素span已經表現得和一個display:inline-block元素一摸一樣了,但是在標准浏覽器中span仍然是行內元素(寬高以及上下margin都無效)。
如 果聲明了不正確DTD,導致ie6在quirks 模式下解析,那麼ie6會自動觸發inline元素的haslayout,不過這裡只討論正常情況下的解析,所以加了個zoom:1來觸發 haslayout;zoom的值設置為除了auto外的任何值都會觸發haslayout,之所以經常用zoom:1;是因為zoom這個屬性本身是 ie的縮放屬性,設置為其他值會導致元素在ie下變形,設置為1既是保持原形不縮放。
了解了上面的情況,我們就可以來解決之前那個問題了。可以改原先的css代碼如下:

復制代碼 代碼如下:


li <span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">{</span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">display:inline-block; /* firefox等標准浏覽器識別*/ </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">*display:inline; /* 只有ie6和ie7識別*/zoom:1; /* 觸發ie6和ie7下的haslayout */ </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">width:80px; </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">height:20px; </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">margin:10px; </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">padding:10px; </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">text-align:center; </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">background:#cfc; </span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica">}</span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"> 讓標准浏覽器識別display:inline-block;讓ie6,7識別display:inline;來覆蓋上面的 display:inline-block;(我為什麼要說”覆蓋”?)。然後通過zoom:1;來觸發haslayout讓inline元素在ie中表 現得和inline-block元素一樣。</span>
</span>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><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>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">ul {</pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">background:#ccc;</pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">padding:0;</pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">margin:0;</pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">list-style:none;</pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">} </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">li {</pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">display:inline-block; </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">*display:inline; </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">zoom:1; </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">width:80px; </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">height:20px; </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">margin:10px; </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">padding:10px; </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">text-align:center; </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html">background:#cfc;</pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"> } </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"></style> </pre><pre name="code" class="html"></head> </pre><pre name="code" class="html"><body> </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"><ul> </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"><li>測試</li> </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"><li>測試</li> </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"><li>測試</li> </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"><li>測試</li> </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"></ul> </pre>
<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px"></span></span><pre name="code" class="html"></body> </pre><pre name="code" class="html"></html></pre><span style="color:rgb(17,17,17); font-family:宋體,微軟雅黑,Verdana,Helvetica; font-size:14px; line-height:25px">可以看到,現在在各浏覽器裡面的顯示已經一致了。li元素都顯示在同一行。</span>

<span style="font-family:宋體,微軟雅黑,Verdana,Helvetica"><a target="_blank" href="http://www.poluoluo.com/jzxy/201206/167493.html">http://www.poluoluo.com/jzxy/201206/167493.html</a>
</span>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved