0

右から左に読む読者 (アラビア語とヘブライ語) に合わせて Web サイトを調整しながら、Webkit ブラウザー (クロムとサファリ) の問題に苦労しています。最後に、これをWebKit のバグとして報告しましたが、まだ回避策が必要です。

問題

body タグに背景画像を割り当て、この背景画像を右に配置して y を繰り返します。次に、水平スクロールバーが表示されるまでウィンドウを小さくします。背景画像はドキュメントの右側に配置されなくなり、ビューポートの幅であるx左からピクセルに配置されます。x

問題を切り分ける簡単な例を次に示します。「Contents」という言葉は、常に背景画像の青い部分の上に表示されることが期待されます。

<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 に答える