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

Posted 2023-03-06

【中文标题】使用百分比宽度进行布局时如何修复 Internet Explorer 7 错误？

【英文标题】：How to fix Internet explorer 7 bug when using percentage widths for layout?

【发布时间】：2010-11-21 13:13:44

【问题描述】：

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

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

所以为了简单起见。

-> BODY 100% 宽度设置

--> CONTAINER 94% 宽度

---> FIRST CHILD DIV 70% 向左浮动（容器的 70%）

---> SECOND CHILD 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;

【问题讨论】：

如果您可以发布您的 CSS，这可能会有所帮助。

【参考方案1】：

尝试以下方法：

div 
    width: 100%;
    *overflow: auto;

它在 IE7 中运行良好。

【参考方案2】：

这就是我用来解决 IE 7 上的问题的方法。

<!--[if IE 7]>
    <style>
        body 
        padding:0 1% 0 0;
        width:101%;
        
    </style>
<![endif]-->

【参考方案3】：

这是解决此问题的简单方法：

div 
*min-width: 100%;

在 IE7 中测试。

【讨论】：

我在 IE7 的条件样式表中使用了它，并带有常规的“最小宽度”表示法（不带星号）。效果很好，谢谢。

不建议在 CSS 规则中使用 *，因为 -> ***.com/questions/4563651/… 相反，您应该使用 IE 条件来为要修改的 IE 版本添加特定的类。

【参考方案4】：

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

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

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

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

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

【讨论】：

帮助很大。澄清了很多困惑......但现在我脑海中仍然存在一个问题。依你的意见;添加多少负像素边距是安全的？ （我的意思是跨浏览器兼容性）

很抱歉，我仍在探索。以我的经验，你不需要超过几个像素来清理 IE（取决于列数），为什么会过火呢？我还没有看到任何跨浏览器问题，但我也更喜欢将它隐藏在不需要它的浏览器中——为了安全起见。您可以在使用条件 cmets 调用的 IE 特定样式表中执行此操作，也可以通过在声明的开头添加哈希（如果您更喜欢 hack - 我不喜欢），如下所示：#margin-right: -3px;跨度>