Webkit瀏覽器中的意外行爲 - 右對齊的背景圖像

在爲從右到左閱讀器（例如阿拉伯語和希伯來語言）調整網站時，在任何Webkit瀏覽器中遇到指定背景時出現意外行爲 - 正確對齊身體標記的圖像。Webkit瀏覽器中的意外行爲 - 右對齊的背景圖像

首先，讓我有一個例子頁面，這種行爲可以看出：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html dir="rtl" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ar" lang="ar"> 
<head> 
<title>Body background image right aligned</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<style type="text/css"> 
body { 
    margin: 0; 
    background-image: url(http://static.convertworld.com/images/cols_yb-rtl.png); 
    background-position: top right; 
    background-repeat: repeat-y; 
} 
#header { 
    height: 100px; 
    background-color: blue; 
} 
#main { 
    position: absolute; 
    top: 100px; 
    right: 150px; 
    width: 610px; 
    background-color: red; 
} 
#column { 
    position: absolute; 
    top: 100px; 
    right: 0; 
    width: 150px; 
} 
</style> 
</head> 
<body> 
<div id="header">Header</div> 
<div id="main">Main</div> 
<div id="column">Column</div> 
</body> 
</html>

現在，讓窗口更小，直到出現一個水平滾動條。背景圖像將不再與文檔右側對齊，它將定位在距離左側x像素處，其中x是視口的寬度。

以下瀏覽器顯示這個意外的行爲：

鉻（Win7的&的WinXP）
Safari瀏覽器（Win7的&的WinXP）
Webkit的迷你瀏覽器，夜間生成2012-09-06（Win7的）

雖然IE，FireFox和Opera顯示了預期的結果，其中背景圖像與視口大小無關，總是與右側對齊。

我是一個偉大的Webkit迷，但是我沒有帶發現比任何解釋，這種等....這是一個錯誤:(如果有人發現了另一種解釋這種行爲，這將是巨大基本上：

這是否發生在你身上呢？
這是由於我的標記是不正確的？
是否有錯誤的CSS？
或...是它的Webkit漏洞:(

我應該說我不是在尋找解決辦法，只是一個可能的解釋。我已經有了一個解決方法，我已經把圖像放在絕對的右邊：0和z-index：-1。

謝謝！

來源

2012-09-17 jonr

是的，我可以通過訪問在Windows 7 X64的你點擊其中的鏈接，使用Chrome 21.0.1180.89 M重複這種效果
你有關的背景放置標記是不是不正確
你有關的背景放置CSS是不是不正確
我認爲這是可以寬鬆地定義爲「WebKit的錯誤」

要糾正此行爲，維護後臺位置右上方，改變你的身體CSS來此：

body { 
    margin: 0; 
    background-image: url(http://static.convertworld.com/images/cols_yb-rtl.png); 
    background-position: top right; 
    background-repeat: repeat-y; 
    background-attachment: fixed; 
}

我相信WebKit的瀏覽器是根據視口的寬度，正如你所提到放置背景，而且還重新定義「右上角」當瀏覽器大小。在調整大小後，如果使用底部滾動條一直向左滾動，則可以看到背景再次適合，但是您的元素位於錯誤的位置。設置background-attachment到固定將解決您的問題。

來源

2012-09-17 18:05:54

嗯，不解決我的問題。運行'Chrome 19.0.1084.1 m'。 – Chris

其實，它確實解決了這個問題，但只有當我調整窗口的大小然後調整它的大小。 – Chris

你能更好的解釋「大小調整大小」嗎？我已經嘗試了多種方法，將背景附件設置爲固定，並且它們似乎都按照您的原始要求工作（瀏覽器調整大小時背景保持在右側） –

Webkit瀏覽器中的意外行爲 - 右對齊的背景圖像

回答

相關問題