2012-05-25 49 views
2

我剛剛創建了一個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錯誤。

Firefox HTML element larger than browser window

+0

我只能在Windows版本的FF12上重現此操作。在Linux上不會發生。然後我搜索了Bugzilla,但還沒有找到任何匹配。 –

+0

哪裏的藍盒子的CSS? –

+0

藍框是示例背景圖像。所有的HTML和CSS都在後 - 沒有祕密。 – Fenton

回答

0

它看起來像這是一個真正的bug在Firefox中,所以我提出了一個錯誤。

0

您的代碼適當收縮在Firefox 12我。

我認爲這是您的問題的插件之一。所以你可能想禁用一些,看看問題是否消失。

另外,嘗試在安全模式下運行Firefox並查看問題是否存在。

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

我試過安全模式並禁用所有插件。直到我關閉普通工具欄(即地址/搜索工具欄) – Fenton

+0

@Sohnee同樣在這裏,但同樣只在Windows下。 –

+0

@Sohnee你正在使用哪個版本的Windows?拉里,你也是。你在使用Aero等嗎? –

0

我想我用Firefox重新激活了一個問題。檢查我的回答相同的主題here,並給我反饋,如果它是有用的;)我不想在兩個地方粘貼相同的答案)

+0

這是對問題的很好的描述,但並不是真正的解決方案。我無法添加消息「請隱藏您的Firefox工具欄以查看此網站」。 – Fenton

+0

我以爲你需要它來測試手機:)但如果你必須顯示你的網站較小的寬度,你可以檢測瀏覽器(FF),然後隱藏工具欄與Java腳本;)只需添加偵聽器事件調整窗口和500px或450px)隱藏工具欄。 –

相關問題