ie7浮动右bug？

Question

我有一个 div 漂浮在右边。该 div 内还有另外两个 div。第一个 div 有背景颜色，当我刷新时，它会“渗入”第二个 div 中。 （有时在它前面，有时在它后面。）当我滚动时，它会自行修复。当我刷新时，它会再次出现。这只发生在 IE7 中。漏洞？下面的代码

#sidebar {float:right;width:310px;}
#articleSidebar {background:#DEE7E7;margin:0 5px 20px 5px;position:relative;}
#articleSidebarHeader {margin-top:10px;padding:5px;}
#articleSidebar h2, #articleSidebarHeader h2 {color:#5A5A5A;font-size:14px;font-weight:bold;}
#articleSidebar ul {color:#5A5A5A;font-size:11px;padding:0 7px;}
#articleSidebar ul li {background: transparent url(../images/bulletSquare9C.png) no-repeat scroll left 6px; padding:0 0 10px 7px;}
#articleSidebar ul li a {color:#5A6B73;display:block;text-decoration:underline;}
#articleSidebar ul li a strong {font-weight:bold;}
#sidebarAd {margin:0 5px 20px 5px;position:relative;}





<div id="sidebar">
        <div id="articleSidebar">
            <div id="articleSidebarHeader">
                <h2>Title here TBD</h2>
            </div>
            <ul>
                <li><a href="replaceMe">link</a>text</li>
                <li><a href="replaceMe">link</a>text</li>
                <li><a href="replaceMe">link</a>text</li>
                <li><a href="replaceMe">link</a>text</li>
            </ul>
        </div>
        <div id="sidebarAd">
        <!--300x250 ad here-->
        <iframe src="http://www.google.com" height="250" width="300" scrolling="no" frameborder="0"></iframe>
        </div>
    </div>

Answer 1

在 IE6 和 7 中，我通常使用 position:static 和 zoom:1 这可能会解决问题。

Answer 2

我认为你的相对定位是问题的一部分。两个 DIV 具有相同的相对定位。我认为在 IE7 中，应用“相对”定位之前元素原始位置的位置和高度/宽度可能未正确计算。

我想到的修复方法是：

1. 使用绝对定位。这会在重新定位之前将元素从 DOM 中取出，同时不会保留它们在页面中占用的空间。在这种情况下，定位值不能相同，否则它们将相互重叠。

2. 首选方法 使用“浮动”div 来实现与听起来相同的效果。您可以指定边距 CSS 定义来实现相同的视觉布局，而不是相对定位。

   #articleSidebar {背景：#DEE7E7;float:left;margin:0 5px 20px 5px;}    
   #sidebarAd{边距：0 5px 20px 5px;浮动：左;}