1

パディング付きのborder-radiusを使用し、HTMLの方向がRTLの場合、期待どおりに機能しないことに気付きました。方向部分を外せば問題なく動作しdir="rtl"ます。次のコードは、なしとありでどのように機能するかを示しますdir="rtl"

なしdir="rtl":

<!DOCTYPE html>
<html >
  <head>
    <title>test</title>
    </head>
    <body>
        <style type="text/css">
        .main {
            padding:5px;
        }
        .tag{
                  background-color: #0473c0;
                  border-radius: 3px 3px 3px 3px; 
                  padding:5px;
            }
        </style>
        <div class="main">
            <span class="tag">test</span>
        </div>

</body>
</html>

結果： ここでは問題ありません

と dir="rtl":

<!DOCTYPE html>
<html dir="rtl">
  <head>
    <title>test</title>
    </head>
    <body>
        <style type="text/css">
        .main {
            padding:5px;
        }
        .tag{
                  background-color: #0473c0;
                  border-radius: 3px 3px 3px 3px; 
                  padding:5px;
            }
        </style>
        <div class="main">
            <span class="tag">test</span>
        </div>

</body>
</html>

結果：ここに画像の説明を入力

ご覧のとおり、テキストは左に移動し、背景は右に移動しました。IE10 と IE9 でテストしました。この問題の修正または回避策はありますか?

4

1 に答える 1

2

.tagディスプレイを として作成するinline-blockと、これが解決されるようです。

  .tag {
    background-color: #0473c0;
    border-radius: 3px 3px 3px 3px;
    padding:5px;
    display: inline-block;
  }

実際のデモについては、この jsfiddleも参照してください。(IE10、Win8 でテスト済み)。

ただし、これが RTL 文書のテキストの流れを混乱させるかどうかはわかりません。

于 2013-01-09T12:01:36.237 に答える