如何修复Internet Explorer 7的bug，当使用百分比宽度布局？ [英] How to fix Internet explorer 7 bug when using percentage widths for layout?
问题描述
请帮助我在这。我需要使用百分比宽度创建布局。我有一个包装器是100％的宽度。
Please help me in this. I need to create a layout using percentage widths. I have a wrapper that is 100% width.
现在我有一个DIV（主包装..我想保持在94％宽度百分比.. 94％ 100％的身体）..好了
Now I have a DIV (the main wrapper.. I want to keep it at 94% width percentage.. 94% of 100% body).. okay fine
这么简单。
- > BODY 100％ width set
-> BODY 100% width set
- > CONTAINER 94％width
--> CONTAINER 94% width
---> FIRST CHILD DIV 70％float left （CONTAINER的70％）
---> FIRST CHILD DIV 70% float left (70% of the CONTAINER)
--->第二个孩子DIV 30％的浮动（占CONTAINER的30％）
---> SECOND CHILD DIV 30% float right (30% of the CONTAINER)
但我在FIRST CHILD DIV下有两个相等的列
But I have 2 equal columns under FIRST CHILD DIV
-----> 50％和50％的宽度
-----> 50% and 50% percentage width
错误是：在ie7 ..最后一列显示在底部..它没有正确浮动..如果我减少宽度到29.9％！它的工作..我认为ie7有处理百分比宽度或东西的错误。请澄清这一点。我希望你得到的问题，因为css / html只是太长..我只是希望它的一个常见的问题..：（
The bug is: In ie7.. the last column is displayed on bottom .. its not properly floated.. If i reduce the width to 29.9% !!! it works.. i think ie7 has bug in treating percentage widths or something.. Please clarify upon this. I hope you get the problem because the css / html is just too long.. i just hope its a common issue.. :(
这是DIV的CSS希望有帮助：）
Here is the CSS for this DIV .. Hope that helps :)
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;
}
推荐答案
问题是子像素四舍五入。当你使用百分比设计时，有时数学不会导致完整的像素（721px的70％是504.7px）。 721是任意的，但使用百分比你会跑到任意数字。没有回避。大多数浏览器找出一个舍入解决方案，不打破布局。 IE7（和旧版）只是向上舍入。向上舍入，您的容器宽度为721像素将包括一个框在505px和另一个217px，总共722px - 超过100％。在这一点，IE决定第二个框不能适合，并把它放在下面。
The problem is sub-pixel rounding. When you are designing with percentages there will be times that the math doesn't result in full pixels (70% of 721px is 504.7px). 721 is arbitrary, but using percentages you'll run into arbitrary numbers. There's no avoiding that. Most browsers figure out a rounding solution for you that doesn't break the layout. IE7 (and older) simply round up. Rounding up, your container width at 721px will include one box at 505px and another at 217px for a total of 722px - more than 100%. At that point IE decides the second box can't fit and drops it below.
根据你的情况有各种解决方案。 Nicole Sullivan有一个有趣的解决方案，基于在最后一列使用overflow：hidden;，而不是float / width组合。我使用它，当我可以。请点击此处：
There are various solutions depending on your situation. Nicole Sullivan has an interesting solution based on using 'overflow: hidden;' on your last column rather than a float/width combination. I use it when I can. Check it out here:
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
我发现，当'overflow'只是不会削减它的另一个解决方案是添加一个小的负边距到一行中的最后一个元素。如果你向左浮动，在右边添加一个几个像素的负边距。向右浮动，将其添加到左侧。我没有遇到任何负面影响（虽然我很高兴听到，如果别人做）。
The other solution that I've found when 'overflow' just wont cut it is to add a small negative margin to the last element in a row. If you are floating left, add a several pixel negative margin on the right. Floating right, add it to the left. I haven't run into any negative effects from that (though I'd be glad to hear if others do).
希望有帮助。干杯。
这篇关于如何修复Internet Explorer 7的bug，当使用百分比宽度布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
