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

Question

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

现在我有一个DIV（主包装器。我想将其保持在94％的宽度百分比。.100％主体的94％）..好的

因此，使其变得简单。

->身体100％宽度设置

->容器94％宽度

-–>初次潜水的孩子左浮70％（容器的70％）

-–>第二名孩子右浮动30％（占集装箱的30％）

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

-----> 50％和50％的百分比宽度

错误是：在ie7中..最后一列显示在底部..其未正确浮动..如果我将宽度减小到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决定第二个盒子不适合放置并放在下面。

根据您的情况，有各种解决方案。妮可·沙利文（NicoleSullivan）有一个有趣的解决方案，它基于“溢出：隐藏；隐藏”；而不是浮点/宽度组合。我会尽可能使用它。在这里查看：

我发现“溢出”不会减少的另一种解决方案是在行中的最后一个元素上添加一个小的负边距。如果您向左浮动，请在右侧添加几个像素负边距。向右浮动，将其添加到左侧。我没有因此而受到任何负面影响（尽管我很高兴听到其他人是否这样做）。

希望能有所帮助。干杯。