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