css - CSS 列在所有地方重叠，但 IE 和 Firefox 3

Question

我的网站及其在某些浏览器中的显示方式存在问题：

http://www.karentiede.com

在 Firefox 2.0 和许多其他浏览器中，“内容”列向左溢出并出现在装饰边框的顶部，使某些内容无法阅读。

这里的一个问答表明，使所有页面都HTML 4.01 Strict DOCTYPE可以帮助使所有浏览器工作相同，但这个问题在 Firefox 中是相反的，在 IE 中不起作用。我应该尝试另一个/不同的修复吗？

来自CSS：

.column2 {
    float: right;
width: 80%;
}

从任何起作用的页面：

<body id="schedule_toc">
<div id="col1_schedule_toc">
<div class="column2">

当我在http://www.browsershots.org查看该站点时，在许多浏览器中的初始显示看起来很糟糕。我有一个或三个（可能是 Firefox）读者告诉我他们看不到文本，我怀疑他们可能是比我是 CSS 编写者更老练的用户。

score 2 · Accepted Answer

我看了一下页面，只有在重新调整页面大小时才会出现问题。

问题是你的右 div 是 80%，所以当屏幕变小并且比率发生变化时，80% 就会重叠到你的左背景中。

score 2 · Accepted Answer

发生这种情况的原因似乎是因为图像（向左浮动）不是整个页面的高度。因此，当页面的宽度不足以容纳相邻的图像和文本时，文本会中断到下一个可用的空白处。

尝试将两个元素都向左浮动，并将与“装饰”列的宽度相等的左边距应用于 column2，如下所示：

.column1 { float: left; width: 125px; }
.column2 { float: left; margin-left: 125px; }
.clear { clear: both; }

您需要在两个元素下方都有一个清除 div：

<div class="column1">...</div>
<div class="column2">...</div>
<div class="clear"></div>

score 1 · Accepted Answer

正如savageguy所指出的，问题肯定是比率。如果您想要的是一个固定宽度的左列和一个可变宽度的右（主）列，那么您可以使用它（未经测试，但应该可以）：

#col1_schedule_toc {
    width: 175px;
    float: left;
}

.column2 {
    float: right;
    width: 100%;
}

编辑：顺便说一句，我注意到（至少在我查看的页面上）您在打开右侧之前也没有关闭左侧列，因此从技术上讲，右侧列在左侧内部，这将导致我建议的修复出现问题. 因此，您还需要移动 col 1 的关闭div，使其位于 col 2 的打开div上方。

编辑 2：另外，正如Plan B所指出的，您还需要在两个元素下方都有一个清除 div 以防止父（容器）div 折叠：

div.clear {
    clear: both;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
}

score 0 · Accepted Answer

除了 savageguy 的正确建议之外，您在左侧页面（您的图片等）中的图像是固定宽度。这就是为什么当浏览器重新调整大小时，80% 突然变得太宽了。

在 column2 上，设置图像宽度的左边距 + 您想要的分隔量（例如，160 应该可以，但您可以使用它），然后将 column2 的宽度设为 100%（剩余宽度的) 应该防止你的重叠。

[编辑：B计划也提供了一个非常强大的解决方案。）

4 回答 4