針對IE6的顯示注意事項
日期 2010年05月15日 12:00:00 | 新聞類別: 最新消息
| 網路上有文章敘述float 跟 margin同時使用時無法顯示的bug,其實並非因為margin標籤的關係!!
在IE6中使用CSS float無法顯示的情況,在本質上是因為外層的div無足夠空間讓使用float標籤的區塊顯示。
我們遇到一特殊案例是同時使用position:absolute;跟float:left;
在此先聲明一點position跟float是不應該同時存在的,這個案例是使用jQuery plungin所產生的特例。
程式如下:
<div id="A" style="width:100px;">
<div id="B" style="position:absolute;z-index:2;width:100px;"></div>
<div id="C" style="position:absolute;z-index:3;float:left;width:100px;"></div>
<div>
在IE6中C區塊不見了,解決方法是將A區塊加寬,使其夠同時容納B跟C區塊,在A區塊外層再加上一區塊,此區塊包覆住所有的區塊,並下overflow:hidden;讓版面整齊。
修正後如下:
<div style="width:100px;overflow:hidden;">
<div id="A" style="width:200px;">
<div id="B" style="position:absolute;z-index:2;width:100px;"></div>
<div id="C" style="position:absolute;z-index:3;float:left;width:100px;"></div>
<div>
</div> CSS基礎教學課程請上XOOPS.ORG.TW查看
|
|