为什么我的网页在 Internet Explorer 8 中不滚动？答案

【问题标题】：Why doesn't my webpage scroll in Internet Explorer 8?为什么我的网页在 Internet Explorer 8 中不滚动？
【发布时间】：2011-06-22 02:56:00
【问题描述】：

所以我花费了大量时间编码和设计这个网页，它在我测试过的所有浏览器中都能完美运行：IE7、IE9、Firefox、Chrome、Safari。但是当我在 IE8（并且只有 IE8）中查看网页时，垂直滚动被禁用。滚动条是有的，但是它被关闭了，我无法使用它或鼠标滚轮。

如果绝对必要，我会发布网页的代码，但首先我想看看是否有人听说过这种情况或有任何初步想法。

【问题讨论】：

您需要先添加更多细节...CSS？基本的 HTML 结构？
这很有趣，当我查看 CSS 样式表以获取这些细节时，我看到了一些我以前从未见过的东西，它解决了问题！我会把它放在这里作为答案，以防其他人遇到这样的事情。

标签： internet-explorer-8

【解决方案1】：

好的，我想通了。如果您将height: "100%"; 放在页面CSS 样式表的html 标记中，它将在IE8 中中断滚动，但其他浏览器仍然可以工作。去图吧。

【讨论】：

不，我放弃了，把背景渐变做了一个拉伸的图片文件。

【解决方案2】：

我也多次遇到过此类问题。IE8 的滚动条，在纯 HTML 页面中不应该可见。因此，请检查您的 <body></body> 标签内的内容。可能有一些margin 或padding 标签。

我目前使用的是 IE8，但没有显示这样的滚动条。无需为HTML 或BODY 修复height:100%。请仔细检查您的页面。

【讨论】：

粘页脚依赖html, body { height: 100% }

【解决方案3】：

您尝试过其他 IE8（不是您本地的 ie8）？可能问题出在你的 ie8 上。

以无插件模式运行或尝试禁用所有插件（包括栏）
恢复高级设置。工具 -> Internet 选项 -> 高级 -> 恢复高级选项。

【讨论】：

【解决方案4】：

如果您使用 CSS，则需要重置 CSS 值以便页面在 IE8 中正确呈现可能会派上用场。我已经提供了链接以及来自 http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ 的 sn-p。这可能会对您有所帮助。如果您正在开始开发，这是一个不错的阅读网站。

重新回到一切开始的地方……

当恐龙还在互联网上漫游时（确切地说是 2004 年），Andrew Krespanis 首次正式讨论了 CSS 重置的概念。在他的文章中，他建议在 CSS 文件的开头使用通用选择器 (*) 来选择所有元素并将它们的边距和填充值设为 0，如下所示：

* {
   margin: 0;
   padding: 0;
}

通用选择器的作用类似于通配符搜索，类似于编程中的正则表达式匹配。因为在这种情况下， * 前面没有另一个选择器，所以所有元素（理论上 - 一些浏览器并不完全支持它）都是匹配的，因此所有元素的所有边距和填充都被删除（所以我们避免了间距示例 1 中所示的差异）。

将通用选择器边距/填充重置应用于我们之前的示例，我们现在删除了所有浏览器之间所有不一致的间距（换句话说，我们不会让浏览器为我们思考，我们向他们展示谁是老板）。

示例 2：应用通用选择器边距/填充重置

但是现在我们在段落之间没有任何间距，所以在我们的通用选择器重置下方的某个地方，我们将声明我们希望我们的段落看起来像的方式。您可以通过多种方式做到这一点——您可以在段落的开头或顶部放置边距（或填充），或两者兼而有之。您可以使用 ems 作为单位、像素或百分比。

重要的是我们选择浏览器呈现它的方式。在我们的示例中，我选择在段落的顶部和底部都添加边距（而不是填充） - 但这是我的选择，您可能希望以不同的方式进行。

这是我用的：

 * { margin:0; padding:0; }
    p { margin:5px 0 10px 0; }

示例 3：在通用选择器之后声明样式规则。

Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on down the page.

不久之后——CSS 大师 Eric Meyer 进一步建立在重置边距和填充的概念之上。在 Eric Meyer 的探索中，他讨论了 Tanek 撤销默认 HTML 样式（他称之为 undohtml.css）的工作，它不仅重置边距和填充，还重置其他属性，如行高、字体样式和列表样式（一些浏览器使用不同的项目符号对于无序列表项）。

经过多次迭代和细化，我们得出了一个奇妙的解决方案，叫做 CSS Reset Reloaded CSS Reset，它不仅通过命名所有可能的 HTML 标签使用更高的特异性使这种 CSS 重置方法比通用选择器方法更准确（因为通用选择器无法将重置应用于所有 HTML 标记），但也会为表格等麻烦元素设置默认值（其中，border-collapse 属性在浏览器中的呈现不一致）。

当然，还有其他重置 CSS 的方法（例如 Yahoo! 的 YUI Reset CSS，我目前在六次修订中使用），您可以根据自己的喜好和项目需要自行滚动。

网站：http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/

注意：我对此有点陌生，所以请多多包涵。

【讨论】：

【解决方案5】：

主要是你应该看到的三件事

如果您将样式指定为溢出：隐藏
如果您给出的页面百分比很高。
如果你给了 float:static。

修复此问题，您的 IE 8 问题将得到解决。

原因：IE 8 与 CBC 检查 IE 的其他任何东西都不一样！对于该主题，如果您将溢出作为隐藏，IE 8 会隐藏（仅滚动条）滚动条，其次，如果您的位置高度为 100% IE 8 将溢出作为隐藏（可以说是自己占用！）n float 是元素如果您将其作为继承或相对但静态不会动态增加，谁可以超出页面大小。

【讨论】：

【解决方案6】：

这是让滚动条以 100% 的高度工作的 hack 方法。不是最好的解决方案，但它现在可以在 IE8 中滚动。

html {
    overflow-y: hidden\9;
}
html, body {
    height: 100%\9;
}
body {
    overflow-y: scroll\9;
}

【讨论】：