23

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

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

所以让这个简单。

-> BODY 100% 宽度设置

--> 容器 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;
}
4

4 回答 4

46

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

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

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

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

希望有帮助。干杯。

于 2009-08-21T07:20:24.680 回答
8

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

div {
*min-width: 100%;
}

在IE7中测试。

于 2012-02-10T10:18:50.213 回答
0

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

<!--[if IE 7]>
    <style>
        body {
        padding:0 1% 0 0;
        width:101%;
        }
    </style>
<![endif]-->
于 2013-11-01T18:14:49.077 回答
0

尝试以下操作：

div {
    width: 100%;
    *overflow: auto;
}

它在 IE7 中运行良好。

于 2013-12-16T12:26:41.770 回答