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

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

  發(fā)布時間：2013-09-21 16:27:51   作者：佚名   我要評論
ie6，ie7的haslayout屬性是個讓人頭疼的問題，想到一個屬性display:inline-block;對！inline- block就是干這個事的，讓一個元素既不換行又具有block元素的特性
ie6，ie7的haslayout屬性是個讓人頭疼的問題。在做導航條的時候，一般會用到ul li結構，大多數(shù)時候我們是把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元素有個特殊的情況，就是觸發(fā)了ie的hasLayout屬性以后就擁有了layout。此時inline元素的表現(xiàn)和標準瀏覽器里面的inline-block元素基本相同。

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

復制代碼
代碼如下:

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

復制代碼
代碼如下:

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; /* 觸發(fā)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;來觸發(fā)haslayout讓inline元素在ie中表現(xiàn)得和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">可以看到，現(xiàn)在在各瀏覽器里面的顯示已經(jīng)一致了。li元素都顯示在同一行。</span>

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

相關文章

  • 淺談原生頁面兼容IE9問題的解決方案

    這篇文章主要介紹了淺談原生頁面兼容IE9問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
    2020-12-16

  • 新版chrome瀏覽器設置允許跨域的實現(xiàn)

    這篇文章主要介紹了新版chrome瀏覽器設置允許跨域的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
    2020-11-30

  • css hack之\9和\0就可能對hack IE11\IE9\IE8無效

    每次設計一張網(wǎng)頁或一個表單，都被各種瀏覽器的兼容問題傷透腦筋，尤其是IE家族。在做兼容性設計時，我們往往會使用各種瀏覽器能識別的獨特語法進行hack，從而達到各種瀏覽
    2020-03-20

  • css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼

    這篇文章主要介紹了css區(qū)分ie8/ie9/ie10/ie11 chrome firefox的代碼,需要的朋友可以參考下
    2020-03-20

  • 解決CSS瀏覽器兼容性問題的4種方案

    這篇文章主要介紹了解決CSS瀏覽器兼容性問題的4種方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2020-02-28

  • 常見的瀏覽器兼容性問題(小結)

    這篇文章主要介紹了常見的瀏覽器兼容性問題(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學
    2020-02-20

  • border-radius IE8兼容處理的方法

    這篇文章主要介紹了border-radius IE8兼容處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2020-02-12

  • 淺談遇到的幾個瀏覽器兼容性問題

    這篇文章主要介紹了淺談遇到的幾個瀏覽器兼容性問題，詳細的介紹了幾種我遇到的問題和解決方式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-09-26

  • base64圖片在各種瀏覽器的兼容性處理

    這篇文章主要介紹了base64圖片在各種瀏覽器的兼容性處理的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-14

  • 對常見的css屬性進行瀏覽器兼容性總結(推薦)

    這篇文章主要介紹了對常見的css屬性進行瀏覽器兼容性總結(推薦)的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-20

最新評論