css - 使用百分比宽度进行布局时如何修复 Internet Explorer 7 错误？

Question

请帮帮我。我需要使用百分比宽度创建布局。我有一个宽度为 100% 的包装器。

现在我有一个 DIV(主包装器..我想将它的宽度百分比保持在 94%.. 100% 主体的 94%).. 好吧

为了让这一切变得简单。

-> BODY 100%宽度设置

--> 容器 94% 宽度

---> FIRST CHILD DIV 70% 向左浮动(容器的 70%)

---> SECOND CHILD DIV 30% 向右浮动(容器的 30%)

但是我在 FIRST CHILD DIV 下有 2 个相等的列

-----> 50% 和 50% 百分比宽度

错误是:在 ie7 中..最后一列显示在底部..它没有正确 float ..如果我将宽度减小到 29.9%!!!它有效..我认为ie7在处理百分比宽度或其他东西时有错误..请澄清这一点。我希望你能解决这个问题，因为 css/html 太长了..我只希望这是一个常见问题.. :(

这是这个 DIV 的 CSS .. 希望有帮助:)

body {
width: 100%;
background: #fff;
text-align: center;
font-size: 12px;
}

#wide-primary {
background: #fff url(img/shadow1.png) repeat-x top;
position: relative;
top: -1px;
}

#primary {
width: 94%;
margin: 0 auto 0 auto;
text-align: left;
}

#features {
float: left;
width: 70%;
padding: 2% 0 0 0;
}

.featurebox {
float: left;
width: 48%;
padding: 0 2% 3% 0;
}

#lastnews {
float: right;
width: 30%;
padding: 2% 0 2% 0;
}

Answer 1

问题是子像素舍入。当您使用百分比进行设计时，有时数学不会产生完整像素(721 像素的 70% 是 504.7 像素)。 721 是任意的，但使用百分比你会遇到任意数字。这是无法避免的。大多数浏览器会为您找出不破坏布局的舍入解决方案。 IE7(及更早版本)简单地四舍五入。四舍五入后，您的 721px 容器宽度将包括一个 505px 的盒子和另一个 217px 的盒子，总计 722px - 超过 100%。那时 IE 决定第二个框不适合并将其放在下面。

根据您的情况，有多种解决方案。 Nicole Sullivan 有一个基于使用“溢出:隐藏”的有趣解决方案；在你的最后一列而不是 float /宽度组合。我尽可能使用它。在这里查看:

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

当“溢出”无法解决问题时，我发现的另一个解决方案是为一行中的最后一个元素添加一个小的负边距。如果向左浮动，则在右侧添加几个像素的负边距。向右浮动，将其添加到左侧。我没有遇到任何负面影响(尽管我很高兴听到其他人是否这样做)。

希望对您有所帮助。干杯。