上部中央に背景画像がある 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 ではこの奇妙な動作が発生します。このページを表示している 4 つのブラウザーすべてのスクリーンショットを追加しました。
アップデート
これは、ブラウザのツールバーの幅がブラウザのツールバーの幅と同じであるため、ブラウザのツールバーのサイズに関連しているようです。同僚がそれを試したところ、彼のツールバーは 427px で、この値で停止しました。これは Firefox のバグだと思います。