IE6中有一個BUG叫border邊框斷線現象(border邊框部分消失)

2024-07-11 08:29:18

字體：大中小

來源：轉載

供稿：網友

IE6中有一個BUG叫border邊框斷線現象，即在IE6中滾動滾動條時有些border邊框莫名其妙的有部分不顯示（邊框顯示不完整）。
有時候發現自己寫的頁面在IE6中測試時發現，有些邊框部分不可見（目前我遇到過某個div的邊框左右兩邊的中間有一部分邊框消失、某個DIV的上邊框消失同時兩邊也有部分消失）；今天恰好遇到后面的這種情況，平常遇到兩邊中間有部分消失的情況時直接給這個DIV加個背景色就可以了，今天卻不知道為什么不行。試了好久最后定義了這個DIV的高度就解決了。于是，搜索了一下這種情況，才發現這屬于border邊框斷線現象，但沒有找到是什么原因導致這樣的現象。下面是在網上找到的解決方法：

現象出現的條件：假設一個容器內有兩個浮動，并使用CLEAR清除浮動，在ie6下拖動滾動條時最外層的border會消失，如果給最外層加上寬度或者高度就不會出現。如下代碼（需要出現滾動條即頁面有足夠的高度）：

復制代碼

代碼如下:
<div style="border:1px #ccc solid;">
<div style="float:left;">sdf</div>
<div style="float:left;">
<p>df</p><p>df</p><p>df</p><p>df</p><p>df</p><p>df</p><p>df</p>
</div>
<div style="clear:both;"></div>
</div>

下面是從網上得到的三種解決斷線現象的方法：
1.在父元素中加入height:1%
2.給父元素設置一個寬度或高度
3.給父元素設置一個背景色.

上一篇：CSS偽類:before在元素之前 :after 在元素之后實例講解

下一篇：IE6/7在滾動區域內的標簽使用position會飄出這個滾動區域不隨滾動