HTML / CSS：总页面宽度大于内容宽度 [英] HTML/CSS: total page width is wider than content

问题描述

我有一个奇怪的问题，我找不到原因！我有以下网页：
http://uk.translation-vocabulary.com/de -german
，则页面的感知宽度可能比内容的宽度大300px。因此，即使在水平拉伸视口以匹配可见内容的情况下，也会出现水平滚动条。

I have a strange problem, and I can't find the cause! I have the following webpage: http://uk.translation-vocabulary.com/de-german and the perceived width of the page is perhaps 300px greater than the width of the content. So a horizontal scrollbar is present even when the viewport is horizontally stretched to match the visible content.

我一直在使用Firebug检查元素，试图找到罪魁祸首。到目前为止没有成功。

I have been inspecting elements with Firebug, trying to find the culprit. No success so far.

在Firefox，Safari，Chrome中观察到了这种效果。未经测试：IE。

This effect observed in Firefox, Safari, Chrome. Untested: IE.

任何帮助都非常感谢！

Benjamin。

推荐答案

您的Facebook按钮导致了此问题（删除按钮会使问题消失）。

Your facebook button is causing this problem (removing the button makes the problem go away).

facebook iframe通过style属性将其宽度设置为 575px 大于100％。

The facebook iframe has its width set to 575px via the style attribute, which is causing the page to be wider than 100%.

请注意，您可以添加CSS规则 html，body {overflow-x：hidden;} 以掩盖问题，但实际上，您应该修复该按钮。

Note that you can add the CSS rule html,body{overflow-x: hidden;} to mask the problem, but instead, you should really fix that button.

这篇关于HTML / CSS：总页面宽度大于内容宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！