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 回答