1

在为从右到左的读者（例如阿拉伯语和希伯来语语言）调整网站时，在将背景图像分配给右对齐的正文标签时，我在任何 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 MiniBrowser, nightly build 2012-09-06 (Win7)

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

我是 Webkit 的忠实粉丝，但除了……这是一个错误之外，我没有找到任何解释 :( 如果有人能找到对此行为的另一种解释，那就太好了。基本上：

  1. 这也发生在你身上吗？
  2. 这是因为我的标记不正确吗？
  3. CSS中有错误吗？
  4. 或者......它是一个 Webkit 错误 :(

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

谢谢！

4

1 回答 1

0
  1. 是的，我可以通过访问您包含的链接来重复此效果，在 Windows 7 x64 上使用 Chrome 21.0.1180.89 m
  2. 您关于背景位置的标记不正确
  3. 您关于背景放置的 CSS 不正确
  4. 我认为这可以松散地定义为“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 浏览器会根据您提到的视口宽度放置背景，但在调整浏览器大小时也会重新定义“右上角”。调整大小后，如果您使用底部滚动条一直滚动到左侧，您可以看到背景再次适合，但是您的元素位于错误的位置。将背景附件设置为固定将解决您的问题。

于 2012-09-17T18:05:54.317 回答