2

我刚刚在顶部中心创建了一个带有背景图像的 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 元素都不会低于 376 像素。这会导致背景位置不再出现在中心，而是看起来像右对齐（然后裁剪图像的右侧部分）。

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

更新

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

Firefox HTML 元素大于浏览器窗口

4

3 回答 3

0

对我来说，您的代码在 Firefox 12 中正确收缩。

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

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

"C:\Program Files\Mozilla Firefox\firefox.exe" -safe-mode
于 2012-05-25T14:26:36.650 回答
0

我想我解决了 Firefox 的问题。在此处查看我对同一主题的回答，如果有帮助，请给我反馈；）我不想在两个地方粘贴相同的答案；）

于 2012-06-08T11:03:29.813 回答
0

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

于 2012-06-25T15:43:54.737 回答