我剛剛創建了一個HTML5頁面,並在頂部中心有一個背景圖片。Firefox 12的html元素將不會縮小到376px以下
<!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中,我得到了這種奇怪的行爲。我添加了顯示此頁面的所有四個瀏覽器的屏幕截圖。
UPDATE
這似乎是與在瀏覽器作爲寬度工具欄的大小它停止在是相同的瀏覽器工具欄的寬度。一位同事剛剛嘗試過,他的工具欄是427px,並停在這個值。我認爲這是一個Firefox錯誤。
我只能在Windows版本的FF12上重現此操作。在Linux上不會發生。然後我搜索了Bugzilla,但還沒有找到任何匹配。 –
哪裏的藍盒子的CSS? –
藍框是示例背景圖像。所有的HTML和CSS都在後 - 沒有祕密。 – Fenton