导致 IE9 和 Opera 水平滚动的问题答案

【问题标题】：Something causing horizontal scrolling on IE9 and Opera导致 IE9 和 Opera 水平滚动的问题
【发布时间】：2012-09-05 17:26:19
【问题描述】：

我正在开发这个网站的前端部分：http://oq.totaleclips.com

当我查看其中一个电影列表时，例如 http://oq.totaleclips.com/mpa/The_Hunger_Games_(Movie_2012)，我会在 Opera 和 Internet Explorer 9 上看到一个水平滚动。如果我将 `body {overflow-x:hidden} 放在我的 CSS 中，我会得到一个预期的结果，但是当用户按下“Like”按钮并提示您发表评论时，Facebook Like 被切断......这将使在 Facebook 上“Like”变得更加困难。

这是 Facebook 问题和 Opera 问题，还是两者兼而有之？我找不到导致溢出的 DOM 元素，我想它可能是 Facebook Like iFrame “保留”了 Like 按钮右侧的空间，但我不想假设。 Facebook 按钮甚至在 Opera 中似乎都不起作用，但这是一个附带问题。

我一直在使用 Firefox 和 Chrome 进行开发，对 IE9 的访问受限，所以当我在 Windows 计算机上查看水平滚动条时，我感到很失望。然后，看到 Opera 做同样的事情，我几乎不能对 IE9 生气。而且，将 Facebook Like 按钮向左移动会导致它与后面的社交按钮之间出现不希望的换行。

是什么导致溢出/水平滚动，我怎么能自己发现这样的问题？

特殊性编辑：水平滚动条向右滚动时，会在屏幕布局的最右侧显示一个白色列。当浏览器窗口水平调整大小时，这确实会消失，但它不会显示在 DOM 中。没有看到正文内页面上的元素流入右侧的空白区域。

【问题讨论】：

标签： css facebook-like internet-explorer-9 opera

【解决方案1】：

我找不到导致溢出的 DOM 元素

这是你的罪魁祸首：

.screener .content {
    margin: auto;
    width: 61em;
}

也许61em 有点多……取决于字体大小和可用的窗口/标签宽度。

【讨论】：

我并不完全相信。如果我减小该大小，则内容会崩溃，这对我来说是完全适合实际内容的大小（播放器 + 侧边栏）。此外，没有 DOM 元素被视为流入该空间。如果尺寸真的是问题，我希望在检查时会看到一些溢出到白色右侧。如果只是某个 div 的宽度问题，我还希望边距用背景颜色填充。我仍然愿意解决这个问题，但 61em 不是那么宽，是吗？
也给那个元素一个鲜红色的边框，你会看到它延伸了多远。但也许这只是问题的一部分，因为您已经将具有 .content 类的元素分层，并且它们都受到样式表中这条规则的影响。请注意，您将只针对最外层的 div.content 元素，使用您设置宽度的规则（而不是所有内部具有相同类的元素），那么它应该适合。