CSS 使用百分比宽度进行布局时如何修复 Internet Explorer 7 错误？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1309964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to fix Internet explorer 7 bug when using percentage widths for layout?
提问by Ahmad Fouad
Please help me in this. I need to create a layout using percentage widths. I have a wrapper that is 100% width.
请帮助我。我需要使用百分比宽度创建布局。我有一个 100% 宽度的包装纸。
Now I have a DIV (the main wrapper.. I want to keep it at 94% width percentage.. 94% of 100% body).. okay fine
现在我有一个 DIV（主要包装器..我想将它保持在 94% 的宽度百分比.. 94% of 100% body.. 好吧
So to make this simple.
所以为了让这一切变得简单。
-> BODY 100% width set
-> BODY 100% 宽度设置
--> CONTAINER 94% width
--> 容器 94% 宽度
---> FIRST CHILD DIV 70% float left (70% of the CONTAINER)
---> FIRST CHILD DIV 向左浮动 70%（容器的 70%）
---> SECOND CHILD DIV 30% float right (30% of the CONTAINER)
---> SECOND CHILD DIV 30% 向右浮动（容器的 30%）
But I have 2 equal columns under FIRST CHILD DIV
但是我在 FIRST CHILD DIV 下有 2 个相等的列
-----> 50% and 50% percentage width
-----> 50% 和 50% 百分比宽度
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.. :(
错误是：在 ie7 中..最后一列显示在底部..它没有正确浮动..如果我将宽度减少到 29.9% !!! 它有效.. 我认为 ie7 在处理百分比宽度或其他方面有错误.. 请澄清这一点。我希望你能解决这个问题，因为 css/html 太长了..我只是希望它是一个常见问题..:(
Here is the CSS for this DIV .. Hope that helps :)
这是此 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;
}
回答by Miriam Suzanne
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.
问题是子像素舍入。当您使用百分比进行设计时，有时数学不会产生全像素（721px 的 70% 是 504.7px）。721 是任意的，但使用百分比你会遇到任意数字。没有什么可以避免的。大多数浏览器会为您找出一个不会破坏布局的舍入解决方案。IE7（及更早版本）只是四舍五入。向上取整，721px 的容器宽度将包括一个 505px 的框和另一个 217px 的框，总共 722px - 超过 100%。那时 IE 决定第二个盒子不适合并将它放在下面。
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:
根据您的情况，有多种解决方案。Nicole Sullivan 有一个基于使用 'overflow: hidden;' 的有趣解决方案。在最后一列而不是浮动/宽度组合上。我尽可能使用它。在这里查看：
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/
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).
当“溢出”不会削减它时，我发现的另一个解决方案是向一行中的最后一个元素添加一个小的负边距。如果您向左浮动，请在右侧添加几个像素的负边距。向右浮动，将其添加到左侧。我没有遇到任何负面影响（尽管我很高兴听到其他人这样做）。
Hope that helps. Cheers.
希望有帮助。干杯。
回答by Nedko
Here is the simple solution for this:
这是一个简单的解决方案：
div {
*min-width: 100%;
}
tested in IE7.
在 IE7 中测试。
回答by Erdal Demir
This is what i am using to fix that problem on IE 7.
这就是我用来解决 IE 7 上的问题的方法。
<!--[if IE 7]>
<style>
body {
padding:0 1% 0 0;
width:101%;
}
</style>
<![endif]-->
回答by Poised_flw
Try the following:
请尝试以下操作：
div {
width: 100%;
*overflow: auto;
}
It works well in IE7.
它在 IE7 中运行良好。
