0

在为从右到左的读者（阿拉伯语和希伯来语）调整网站时，我一直在努力解决 webkit 浏览器（chrome 和 safari）上的问题。最后我将此报告为WebKit 错误，但我仍然需要解决此问题。

问题

将背景图像分配给 body 标签，并将此背景图像放置在右侧并重复-y。现在，使窗口变小，直到出现水平滚动条。背景图像将不再与文档的右侧对齐，它将定位在距视口宽度x左侧的像素处。x

这是一个简化的示例，用于隔离问题。“内容”一词应始终位于背景图像的蓝色部分之上。

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

您还可以查看WebKit 错误报告中包含的屏幕转储。

有什么想法吗？

4

1 回答 1

1

使用绝对定位的元素怎么样？

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

似乎对我来说是一种解决方法。

于 2012-09-09T20:13:20.373 回答