CSS问题：奇怪的100％宽度问题

Question

CSS问题：奇怪的100％宽度问题

cssbrowserwidthoverflow

3

我刚意识到每个浏览器似乎都有一个奇怪的渲染问题。

测试用例如下：http://jsfiddle.net/cKNQD/ 1. 请缩放您的浏览器，直到出现底部滚动条。

2. 然后向右滚动。

您会发现，#header将不再具有100％的宽度。问题似乎是内部的.wrapper导致的。我需要这个包装器来限制#headers内容的尺寸。

欢迎提供解决方案。

- Henry Ruhs

1

这不是渲染问题，浏览器遵循规范。#header的宽度为100％，即浏览器窗口的宽度。当您使.wrapper大于100％时，它会从#header中溢出。您可以按建议设置min-width或确切的width，或设置overflow: hidden来隐藏溢出（但这可能不是您想要的）。 - ThatMatthew

最佳解决方案应该是给body或者100%的容器添加一个min-width样式。 - Henry Ruhs

2个回答

0

#header的宽度未定义，因此不是100％，而是“auto”。

也许您应该从.foo类中删除“width: 600px”？

- galeksic

1

块级元素默认为100％^^ ...而没有.foo只是内容的示例。 - Henry Ruhs

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- NGLN · Accepted Answer

在头部添加min-width: 980px;。

请参见更新的演示。

在Win7上测试过，包括IE7、IE8、IE9、Opera 11.50、Safari 5.0.5、FF 6.0和Chrome 13.0。