在为从右到左的读者(阿拉伯语和希伯来语)调整网站时，我一直在努力解决 webkit 浏览器(chrome 和 safari)的问题。最后我将其报告为 WebKit bug ，但我仍然需要一个解决方法。
问题
为 body 标签分配一个背景图像，并将该背景图像定位在右侧并重复-y。现在，缩小窗口直到出现水平滚动条。背景图像将不再与文档右侧对齐，它将位于距左侧 x 像素的位置，其中 x 是视口(viewport)的宽度。
这是一个简化的示例，用于隔离问题。 “内容”一词应始终位于背景图像蓝色部分的顶部。
<html dir="rtl">
<head>
<style type="text/css">
body {
margin: 0;
background-image: url(data:image/png;base64, ...);
background-position: top right;
background-repeat: repeat-y;
}
#contents {
width: 900px;
height: 900px;
}
</style>
</head>
<body>
<div id="contents">Contents</div>
</body>
</html>
您还可以看到 screendump包含在 WebKit 错误报告中。
有什么想法吗？
最佳答案
使用绝对定位元素怎么样？
<html dir="rtl">
<head>
<style type="text/css">
body {
margin: 0;
}
#bg {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAACAgMAAABQ2kAmAAAAAXNSR0IArs4c6QAAAAlQTFRF5ev/9Pb/////KIKAcgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfcCQIMFSrrJQqoAAAAFUlEQVQY02PgWjU4wQoGokDUkHY+ACqhykF2Ey1yAAAAAElFTkSuQmCC);
background-position: top right;
background-repeat: repeat-y;
position: absolute;
right: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#contents {
width: 900px;
height: 900px;
}
</style>
</head>
<body>
<div id="bg"></div>
<div id="contents">Contents</div>
</body>
</html>
似乎对我有用。
关于CSS 主体 `background-image` 在 Chrome、Safari (webkit) 上右对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12340743/