水平滚动条仅在 IE7 中出现，即使设置了溢出：隐藏答案

【问题标题】：Horizontal scrollbar appears only in IE7 even with overflow:hidden being set水平滚动条仅在 IE7 中出现，即使设置了溢出：隐藏
【发布时间】：2011-09-15 17:56:04
【问题描述】：

我正在努力解决这个问题。

我有一个令人不安的水平滚动条，只有在 IE7 中浏览我的网站时才会出现：
http://www.regia.it

我已经尝试并尝试通过在我的 divs 上使用 overflow:hidden 来阻止这种情况的发生，但由于某种原因，我似乎无法找到导致问题的原因。

非常感谢任何帮助。

【问题讨论】：

在兼容性视图中用 IE8 测试过，这里没有滚动条。我看到的唯一错误是菜单，它是垂直的而不是水平的。能发个截图吗？
看看这个 SO 问题：stackoverflow.com/questions/2941172/…
这是IE7的截图：dl.dropbox.com/u/2899749/screen.png
我一直在尝试body标签上的overflow-x: hidden属性，但没有成功。

标签： css internet-explorer-7 horizontal-scrolling

【解决方案1】：

这看起来确实很奇怪。我假设您不介意即使在小屏幕上页面也不能水平滚动，因为您尝试使用：

body{overflow-x: hidden;}

在这种情况下，如果您将其应用于html 而不是body，它应该可以解决问题：

html{overflow-x: hidden;}

我真的不想长期实施，但如果您正在寻找快速解决方案，这应该可以作为临时措施，直到您找出问题所在。我还将它放在有条件的注释中，以免破坏大多数人在现代浏览器上的体验。

<!--[if IE 7]>
    Link to alternate style sheet
    OR
    <style> /*CSS in here*/ </style>
<![endif]-->

编辑：我已经找到问题的原因，因此无需使用上述解决方法。正如我所怀疑的，这个问题与绝对定位和相对定位有关。

您只需从.grid_2 和.grid_12 中删除position:relative，滚动条就会消失。

【讨论】：

谢谢。这就是我在您回答之前几分钟所做的事情，并且确实修复了这个错误。正如你所说，我希望有一个更好的解决方案，但这会做！谢谢。
@milksamsa：很高兴我能提供帮助，也很高兴您不必使用可用性降低的解决方法。
+1 表示关于position:relative 的编辑——这对我来说是个新闻，为我省去了一些麻烦。我真的认为这是最终的解决方案——隐藏溢出可以让它消失，即使它可能是必要的！

【解决方案2】：

我也遇到过这个棘手的问题。我在一个 div 中有一张桌子，这些在一个外部 div 里面。当我删除样式以使内部 div 宽度：100% 时，我的“仅限 IE7”滚动条情况消失了。

希望这会有所帮助。

【讨论】：