Question

在为从右到左的读者（例如阿拉伯语和希伯来语）调整网站时，我在任何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 是视口的宽度。

以下浏览器显示此意外行为：

Chrome（Win7＆amp; WinXP）
Safari（Win7＆amp; WinXP）
Webkit MiniBrowser，每晚构建2012-09-06（Win7）

虽然IE，FireFox和Opera显示预期的结果，其中背景图像与视口的大小无关，始终与右侧对齐。

我是一个伟大的Webkit粉丝，但除此之外我没有找到任何解释....这是一个错误:(如果有人发现这种行为的另一种解释会很好。基本上是：

这也发生在你身上吗？
这是因为我的标记不正确吗？
CSS中是否有错误？
或......这是一个Webkit错误：（

我应该说我不是在找一个解决方法，只是一个可能的解释。我已经有一个解决方法，我将图像绝对正确放置：0和z-index：-1。

谢谢！

Answer 1

是的，我可以在Windows 7 x64上使用Chrome 21.0.1180.89 m访问您附带的链接重复此效果
您的背景放置标记不正确
您的CSS背景放置不正确
我认为这可以被宽泛地定义为“webkit bug”

要纠正此行为并将背景位置保持为右上角，请将您的正文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浏览器会根据您提到的视口宽度放置背景，但在调整浏览器大小时也会重新定义“右上角”。调整大小后，如果使用底部滚动条一直向左滚动，则可以看到背景再次适合，但是元素位于错误的位置。将后台附件设置为已修复将解决您的问题。

Webkit浏览器中出现意外行为 - 右对齐背景图像

1 个答案: