修复了全宽 CSS 标题在窄浏览器窗口中无法正确滚动的问题答案

【问题标题】：Fixed full-width CSS header not scrolling correctly with narrow browser windows修复了全宽 CSS 标题在窄浏览器窗口中无法正确滚动的问题
【发布时间】：2010-09-08 06:51:04
【问题描述】：

我目前正在重新设计一个网站，但在狭窄的浏览器窗口中查看页面时遇到了水平滚动问题。

页眉包含一个徽标、一些文本和一个导航栏，跨越 100% 的页面宽度，但页眉内容以 940 像素的固定宽度居中。正确显示时，它看起来像这样：

但是，如果将浏览器窗口的大小调整为比固定宽度窄，则会出现水平滚动条（如预期的那样），但滚动它会“剪切”滚动部分，产生以下结果：

如果 CSS/HTML 可以为您提供任何关于我做错了什么的提示，则可以实时查看正在进行的网站here。

【问题讨论】：

标签： css

【解决方案1】：

解决此问题的最简单方法是将min-width:940px 添加到正文标记并使用 ie6 的表达式。

【讨论】：

body{width:expression(document.documentElement.clientWidth
谢谢；这具有预期的效果。不过，我猜一定有一种方法可以在不需要表达式的情况下进行这种布局？这就是我目前设置 div 的方式吗？
另外 - 在 IE6 和 IE7 中，徽标底部和导航栏顶部之间存在黑色间隙。它不会出现在任何其他浏览器（包括 IE8）中 - 如何删除它？
您可以将 .header {margin:20px auto;} 更改为 .header {margin:20px auto 0;}

【解决方案2】：

它在 Firefox 3.6.8、IE 8 和 Chrome 5 中运行良好。~~您使用的是什么浏览器？~~看起来您使用的是 Chrome。

页面是否被错误地缓存在浏览器中？尝试清除缓存，然后检查该站点，或尝试在另一台计算机上查看它。标题的 CSS 简单而正确。应该不会有什么问题。

【讨论】：

在 IE6、IE7、IE8、Safari、Chrome 和 Firefox 中对我来说是坏的（只有当浏览器窗口足够窄以保证水平滚动的滚动条时才会坏）。
在 IE6 中，我为标题获得了单独的滚动条。我怀疑一些溢出问题 - 稍后会深入研究。