css - 在 IE9 和 Opera 上导致水平滚动的东西

Question

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

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

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

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

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

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

Answer 1

I cannot find a DOM element that is causing the overflow

这是你的罪魁祸首:

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

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