css - IE7 中奇怪的 CSS 问题

Question

我在 Internet Explorer 7 中遇到了一个罕见的 CSS 问题(我实际上是在 IE8 上以兼容性 View 对其进行测试，但客户端也向我发送了原生 IE7 中的屏幕截图)，它很容易重现:

1. 转到 this site (西类牙语)。
2. 在左栏中，点击标有“Fiestas anteriores”的框的边框(或周围某处)
3. 该元素现在应向下移动，但如果您单击左侧的空白区域，它会像条好狗一样返回。

我一直在四处寻找 IE7 错误，并尝试使用 width、border 和其他 CSS 属性，但没有成功。欢迎任何意见!

Answer 1

我发现如果你应用以下样式，当你点击它附近的任何地方时它似乎会阻止它崩溃:

#prevparties_middlerow
{
    float:left;
    width:150px;
}

不过，如果可以的话，有一个小建议，而不是像这样在面板内容的任一侧使用 div 来创建边框:

<div id="prevparties_left"/>
<div id="prevparties_contentBox">
     content
</div>
<div id="prevparties_right" class="boxmiddle"/>

您可能会发现将内容框包装在将边框设置为背景的 div 中要容易得多，如下所示:

<div id="prevparties_contentWrap">
    <div id="prevparties_contentBox">
         content
    </div>
</div>

这里的主要优点是包装 div 将向下延伸到包含 div 的高度，因此您不必为所有这些边框 div 应用特定的高度。当东西像这样包裹时，我发现它破裂的可能性要小得多 :D

无论如何，希望这对您有所帮助。