Question

我刚刚在顶部中心创建了一个背景图片的HTML5页面。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <p>Example</p>
    </body>
</html>

使用以下CSS：

body 
{
    background-image: url('images/bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 36px 0 0 0;
}

但我在Firefox 12中发现了一个问题。

无论我缩小浏览器窗口多少，HTML元素都不会低于376px。这会导致背景位置不再出现在中心，而是看起来像是右对齐（然后裁剪图像的右手部分）。

在Chrome，Opera和Internet Explorer中，它按预期工作，但在Firefox中我得到了这种奇怪的行为。我添加了显示此页面的所有四个浏览器的屏幕截图。

更新

这似乎与浏览器中工具栏的大小有关，因为它停止的宽度与浏览器工具栏的宽度相同。一位同事刚刚试过它，他的工具栏是427px，它停在这个值。我认为这是一个Firefox错误。

Firefox HTML element larger than browser window

Answer 1

您的代码在我的Firefox 12中正确收缩。

我认为这是导致问题的插件之一。所以你可能想要禁用一些，看看问题是否消失。

此外，尝试在安全模式下运行Firefox并查看问题是否存在。

"C:\Program Files\Mozilla Firefox\firefox.exe" -safe-mode

Answer 2

我认为我重新解决了Firefox的问题。检查我对同一主题here的回答并给我反馈是否有用;）我不想在两个地方粘贴相同的答案;）

Answer 3

看起来这是Firefox中的一个真正的错误，所以我提出了一个错误。

Firefox 12 html元素不会缩小到376px以下

3 个答案: