【原】display:inline-block下的IE元素
通常我們想讓內(nèi)聯(lián)元素為行塊布局顯示，有2種方法，最常見的是方法是.selector {float:left;......}，第二種方法是.selector {display:inline-block;......}，對于第二種方法，在IE瀏覽器中得到支持，測試結(jié)果會認(rèn)為IE能識別display:inline-block屬性，而最近查閱了資料后，得到結(jié)果并非如此......
display:inline-block ，簡單來說就是將對象呈遞為內(nèi)聯(lián)對象，但是對象的內(nèi)容作為塊對象呈遞。這個屬性目在主要瀏覽器的新版本中得到良好的支持，而IE6、7瀏覽器并不識別display:inline-block屬性，之所以IE6、7中內(nèi)聯(lián)元素設(shè)置了display:inline-block后成行塊布局，是因為display:inline-block觸發(fā)了內(nèi)聯(lián)級別的元素的 layout 特性，使內(nèi)聯(lián)元素具有inline-block的表癥。
關(guān)于IE haslayout，《前端開發(fā)人員需要了解的IE hasLayout》中有詳細(xì)介紹，本文簡單介紹haslayout的2個重要知識點：
注：在IE8及以上版本做測試時，display:inline-block中的haslayout不起作用，故筆者認(rèn)為IE8及以上版本已經(jīng)淘汰display:inline-block屬性下觸發(fā)的haslayout。
針對這2個知識點，做了元素行塊布局（inline-block）的測試：
1.對IE6、7中內(nèi)聯(lián)元素設(shè)置display:inline-block的測試
<!DOCTYPE html ><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>行內(nèi)元素的display:inline-block屬性</title>
</head>
<style type="text/css">
.box {
width:20%;
height:50px;
margin:0 0 10px 10px;
border:solid 3px #f00;
}
.sty-lb {
display:inline-block;
}
</style>
<body>
<span class="box sty-lb">行內(nèi)元素的display:inline-block屬性</span>
<span class="box sty-lb">行內(nèi)元素的display:inline-block屬性</span>
<span class="box sty-lb">行內(nèi)元素的display:inline-block屬性</span>
<span class="box sty-lb">行內(nèi)元素的display:inline-block屬性</span>
</body>
</html>
在IE6瀏覽器顯示頁面正常：
2.對IE6、7中塊級元素設(shè)置display:inline-block的測試
<!DOCTYPE html ><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>塊級元素的display:inline-block屬性</title>
</head>
<style type="text/css">
.box {
width:20%;
height:50px;
margin:0 0 10px 10px;
border:solid 3px #f00;
}
.sty-lb {
display:inline-block;
}
</style>
<body>
<div class="box sty-lb">塊級元素的display:inline-block屬性</div>
<div class="box sty-lb">塊級元素的display:inline-block屬性</div>
<div class="box sty-lb">塊級元素的display:inline-block屬性</div>
<div class="box sty-lb">塊級元素的display:inline-block屬性</div>
</body>
</html>
在IE6瀏覽器顯示頁面并不是我們想要：
?
3.對IE6、7中塊級元素觸發(fā)layout，并設(shè)置display:inline的測試
<!DOCTYPE html ><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>塊級元素的display:inline-block屬性</title>
</head>
<style type="text/css">
.box {
width:20%;
height:50px;
margin:0 0 10px 10px;
border:solid 3px #f00;
}
.sty-lb {
zoom:1;/* 觸發(fā)元素的haslayout屬性 */
display:inline-block;/* 非IE6、7瀏覽器識別該屬性，使得頁面也成行塊布局 */
*display:inline;/* 針對IE6、7定義 display:inline，讓塊元素呈遞為內(nèi)聯(lián)對象，并具有display:inline-block屬性的表癥 */
}
</style>
<body>
<div class="box sty-lb">塊級元素的display:inline-block屬性</div>
<div class="box sty-lb">塊級元素的display:inline-block屬性</div>
<div class="box sty-lb">塊級元素的display:inline-block屬性</div>
<div class="box sty-lb">塊級元素的display:inline-block屬性</div>
</body>
</html>
在IE6瀏覽器顯示正常：
?
總結(jié)：IE6、7中內(nèi)聯(lián)元素觸發(fā)layout屬性后， 擁有了display:inline-block屬性的表癥，而塊級元素觸發(fā)layout屬性并設(shè)置了 display: inline ，那么它也擁有了display:inline-block屬性的表癥。
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/PeunZhang/archive/2012/02/07/2341985.html
總結(jié)
以上是生活随笔為你收集整理的【原】display:inline-block下的IE元素的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： wp7 sdk部署应用操作
- 下一篇： pthread_cleanup_push