IE六、7下inline-block不起做用

時間 2019-11-14

標籤 inline block 不起简体版

原文原文鏈接

網上查到資料是給元素設定display:inline-block，再觸發layout，設定display:inline;由於全部的瀏覽器都支持inlie。css

即: div{display:inline-block;} div{display:inline;}

原理在下面：

寫在前面的話，在我開發CSS的過程當中，我發現不少詭異的問題都是對概念理解有誤差，因此在每篇開始的時候，我都把W3c的解釋拿出來曬曬。我的經驗，不少的問題看看W3C通常都可以解決，W3C是最好的參考書。html

官方解釋：將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。 chrome

按照這個解釋：支持的瀏覽器有（ie8,ie9,chrome,firefox3.6+,因爲我是用firefox3.6測試的），ie6，ie7 是不支持這個屬性的。瀏覽器

ie6,7 如何支持這個屬性呢？佈局

對於塊級元素，直接讓塊級元素成行內元素，而後再觸發layout。 {display：inline;zoom:1}，可能有的同窗會說，怎麼說ie6,7不支持這個元素呢？測試

我不是常常在ie6,7的a標籤、span 下使用這個屬性嗎？也起到了做用，這裏理解可能有一個誤區，使用display：inline-block是觸發了layout的緣由。ui

另一種方式就是先觸發塊級元素的layout 屬性，而後再讓他成內聯元素來展示。好比p元素,能夠這樣寫 p{display:inline-block}p{display:inline} spa

display：inline-block能夠用來作什麼？firefox

能夠作的事情不少，能夠寫頂部的菜單，能夠圖文混排，能夠內嵌block元素，也能夠至如inline元素中，能夠作信息卡片，如百度空間搭訕有緣人的卡片有緣人記念日的固定寬度的書寫，固然也能夠作佈局。萬變不離其宗，我以爲最本質的就是利用它的使元素爲內聯對象，可是內容作塊狀呈遞。這點咱們應該牢記。只要理解了它的本質東西，咱們才能夠以不變應萬變，甚至能夠創造本身的東西。htm

使用它要注意什麼呢？

在使用了display：inline-block的元素之間有換行符，空格間隙問題。

1.塊狀元素被設置了display：inline-block後，ie6,7沒有空格問題。其餘瀏覽器都有。以下圖所示：

在ie8，ie9，firefox能夠經過使用font-size:0來解決，可是chrome很悲劇。仍是有空白，我使用的是chrome10。不能清除。能夠經過添加letter-spacing屬性

的值來解決，建議做者經過嘗試來解決這個問題。我設置的值是-8px剛纔好清除空白。我擔憂這會不會有相互覆蓋問題。後來我將值調大到-28px，果真，在chrome中有覆蓋，可是在其餘的瀏覽器中沒有。可看法決這個問題以chrome爲主。

2.內聯元素被設置了display：inline-block後，全部的瀏覽器都有換行，空白間隙問題。

以下圖所示：

全部瀏覽器，ie6,7,8,9 chrome，firefox都有空白，

怎麼解決呢。直接在包含的元素上添加letter-spacing:-8px; 便可。

最後附上我研究的代碼：

1 <!DOCTYPE HTML>
 2 <html >
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
 5     <style type="text/css">
 6 * { margin:0; padding:0 }
 7 #doc { width:990px; margin:0 auto; margin-top:50px;font:12px/1.5 arial; }
 8 #doc h4 { border-bottom:1px solid #000; margin:10px 0px; }
 9 dib{display:inline-block}
10 div{display:inline-block;}
11 div{display:inline;}
12 ul{letter-spacing:-8px;}
13 ul li{display:inline;zoom:1;}
14     </style>
15     <title></title>
16 </head>
17 <body>
18     <div id="doc">
19     <h4>display:inline-block的研究</h4>
20     <div class="dib">測試這個屬性的支持狀況1</div>
21     <div class="dib">測試這個屬性的支持狀況2</div>
22     </div>
23     <ul >
24     <li><img src="dj.jpg"/></li>
25     <li><img src="dj.jpg"/></li>
26     </ul>
27     <div style="letter-spacing:-8px;">
28     <img src="dj.jpg"/>
29     <img src="dj.jpg"/>
30     <img src="dj.jpg"/>
31     </div>
32 </body>
33 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。