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;
}

但我在12号火狐身上发现了一个问题

无论我如何缩缩浏览器窗口, HTML 元素从不低于376px。这导致背景位置不再出现在中心, 但看起来它与正对齐( 然后将图像的右侧部分裁剪 ) 。

在铬、歌剧和互联网探索器中,它和预期的一样有效,但在Firefox中,我得到了这种奇怪的行为。我添加了显示此页面的所有四个浏览器的截图。

<强> UPDATE

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

"https://i.sstatic.net/OPcXe.png" alt="Firefox HTML 元素大于浏览器窗口"/ >

Answer 1

看来这是火狐的真虫所以我养了一个虫

Answer 2

你的密码在12号火化器里完全可以收缩

我认为这是你的一个配方造成问题。所以你也许想禁用几个,看看问题是否解决了。

同时,尝试在安全模式下运行 Firefox, 看看问题是否存在。

"C:Program FilesMozilla Firefoxfirefox.exe" -safe-mode

Answer 3

我觉得我对Firefox已重获爱戴。请看看我对同一主题< a href=>的回答。 https:// stackoverflow. com/ questions/10883401/ divs- wont- wind- resize- for- a- wide- than-420px/10947548#10947548> 。如果有用的话, 请给我回馈 ; 我不想在两个地方粘贴同样的答案。

友情链接