1

サイトを右から左への読者（アラビア語やヘブライ語など）に適合させているときに、右揃えのbodyタグに背景画像を割り当てる場合、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はビューポートの幅です。

次のブラウザは、この予期しない動作を示しています。

  • Chrome（Win7＆WinXP）
  • Safari（Win7＆WinXP）
  • Webkit MiniBrowser、ナイトリービルド2012-09-06（Win7）

IE、FireFox、Operaは期待される結果を示していますが、ビューポートのサイズに関係なく、背景画像は常に右揃えになっています。

私はWebkitの大ファンですが、これ以外の説明はありません。これはバグです:(誰かがこの動作について別の説明を見つけたら素晴らしいと思います。基本的に：

  1. これはあなたにも起こりますか？
  2. これは私のマークアップが正しくないためですか？
  3. CSSにエラーはありますか？
  4. または...それはWebkitのバグですか:(

私は回避策を探しているのではなく、考えられる説明を探していると言うべきです。画像を絶対右：0およびz-インデックス：-1に配置する回避策がすでにあります。

ありがとう！

4

1 に答える 1

0
  1. はい、Windows7x64でChrome21.0.1180.89mを使用して、含まれているリンクにアクセスすることで、この効果を繰り返すことができます
  2. 背景の配置に関するマークアップは正しくありません
  3. 背景の配置に関するCSSは正しくありません
  4. これは大まかに「Webkitのバグ」として定義できると思います

この動作を修正し、背景の位置を右上に維持するには、本体の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ブラウザーは、おっしゃるようにビューポートの幅に応じて背景を配置していると思いますが、ブラウザーのサイズが変更されると「右上」も再定義されます。サイズを変更した後、下部のスクロールバーを使用して左端までスクロールすると、背景が再び収まることがわかりますが、要素が間違った場所にあります。background-attachmentをfixedに設定すると、問題が修正されます。

于 2012-09-17T18:05:54.317 に答える