Firefox背景圖像水平居中奇怪

我正在爲CMS構建一些基本的HTML代碼。 CMS中與頁面相關的選項之一是「背景圖像」和「拉伸頁面寬度/高度到背景圖像寬度/高度」。所以在大的背景圖像下，整個事物變得可見。Firefox背景圖像水平居中奇怪

我屏幕分辨率爲1280 X 1024。

如果我做到以下幾點：

指定的背景圖像是1400px寬
指定「位置」爲「中心中心」（ HORIZ。/ VERT。）
指定「拉伸頁面寬度到背景圖像寬度」

第

在FF中，發生以下情況：

頁面正確拉伸至1400px。我得到一個水平滾動條，因爲我的屏幕比那個小。到現在爲止還挺好。
現在離奇的事情：背景圖像是不中心相對於1400px，從而顯示出完整的圖像，但相對於我的1280px視，隱藏圖像的一部分超出屏幕的左邊緣，並將白色條紋留在右側而不是顯示整個圖像。
沒有其他可以操縱任何東西的元素（DIV，包裝等）。所有設置都直接在主體中。

更新：IE做它正確。 Google Chrome也有同樣的問題。

就好像Firefox首先渲染100％寬度的背景圖像並居中，然後發現身體需要拉伸到1400px。

這是Firefox的正常行爲嗎？任何想法我可以做什麼？

發佈一個鏈接會有點麻煩，因爲它都在封閉的開發環境中，但如果其他所有的都失敗了，我會把東西放在一起看。

的CSS：

body 
{ 
background-image: url(http://www.domain.com....image.jpg); 
background-repeat: no-repeat; 
background-position: center center; 
min-width: 1400px; 
height: 100%; 
}

來源

2009-11-09 Pekka 웃

你被CSS規範的怪癖咬傷：由於section 14.2，您應用於body元素的任何背景圖像都將成爲html的背景。（這樣做的目的是讓作者能夠繼續使用他們期望它來自CSS前瀏覽器的body標籤的背景。）

在IE中，html代表整個文件畫布並展開以適應放大的身體寬度。在其他瀏覽器中，它的作用與其他任何display: block元素一樣，並保持視口寬度，而不管放入其中。其他瀏覽器在這裏可以說是比較正確的，但CSS規範在主題上並不十分清晰，結果是IE中的結果更接近於14.2關於畫布的措辭。無論哪種方式，它都不是真正的可靠行爲。

通過在html而不是body上設置寬度和背景，您可以跨瀏覽器獲得一致的結果。（請記住在IE中使用標準模式。）

但是一個1400px固定寬度文檔？聽起來像一個非常糟糕的主意。

來源

2009-11-09 15:14:32 bobince

感謝您的出色信息。正如我後來糾正的，1400px應該是最小寬度。將嘗試HTML路線。 – 2009-11-09 15:28:56

背景位置應留有頂部; 沒有設置

body{ 
margin:0; 
padding:0; 
}

來源

2009-11-09 14:40:57

它應該讀取「最小寬度：1400px」，我改變了這種情況，但問題仍然存在。背景位置必須能夠位於中心位置，因爲屏幕可以寬於1400像素，並且需要定位圖像。 – 2009-11-09 14:47:21

嘗試添加：

width: 100%; 
display: table;

到body標籤樣式（也background-attachment: fixed;可能需要）

來源

2009-11-09 15:01:29 krcko

'display：table'？咦？除非你使body：'table-row'的所有子元素和它們的子元素'display：table-cell'完全沒有定義結果。 – bobince 2009-11-09 15:16:10

顯示：表格的確有風險。我會與上面的答案一起去。不管怎麼說，還是要謝謝你。 – 2009-11-09 15:29:36

實際上，我遇到了Firefox和大背景圖像（以中間爲中心）的問題 - 如果將窗口大小調整得較小，則內容背景會向左移動。添加'display：table;寬度：100％;''身體''在我的情況下解決了問題... – krcko 2009-11-09 16:31:55

Firefox背景圖像水平居中奇怪

回答

相關問題