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

Question

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

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

所以要做到这一点很简单.

- > BODY 100%宽度设定

- >容器94%宽度

--->第一个孩子DIV 70%向左浮动(70%的CONTAINER)

--->第二个孩子DIV 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

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

根据您的具体情况,有各种解决方案.Nicole Sullivan有一个基于使用'overflow:hidden;'的有趣解决方案.在你的最后一列而不是浮动/宽度组合.我尽可能地使用它.看看这里:

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

我在"溢出​​"时发现的另一个解决方案就是在一行中的最后一个元素上添加一个小的负边距.如果向左浮动,请在右侧添加几个像素负边距.向右浮动,将其添加到左侧.我没有遇到任何负面影响(虽然我很高兴听到别人这样做).

希望有所帮助.干杯.

Answer 2

这是一个简单的解决方案:

div {
*min-width: 100%;
}

在IE7中测试过.