css - IE9RTLバックグラウンドポジショニング

Question

フィドル： http： //jsfiddle.net/bHRVe/

矢印にはスプライトが使用されています。FirefoxとIE8では、背景の位置は問題ありません。

ただし、RTLの方向はIE9をスローしているようで、矢印はもうありません。

ポジショニングをからに変更するleft -52pxとright -52px、IE9では正しく表示されますが、他のブラウザーでは壊れます。

同じCSSを使用してこれを修正する方法はありますか？（条件文やハックなし）

Answer 1

これがあなたの問題の純粋なCSSベースの解決策です：

css：

.button span {
    background: url("http://i48.tinypic.com/16716yb.png") no-repeat 0 -52px;
    margin-right: 0.5em;
    padding: 0 5px;
    direction: rtl;
    width:4px;
    height:15px;
    display:inline-block;
} 

HTML：

注：空の要素にスペース（）を入れる と、ブラウザの互換性が向上する場合があるため、お勧めします。

<a class="button" href="#">
    <b>تم, غزو عل جنوب</b>
    <br/>
    <u>ب ان. Testما وص</u>
    <span>&nbsp;</span>
</a>

追記：デフォルト<span>では、<a>要素はインライン要素です。必要に応じて、それらを作成するdisplay:block;かdisplay:inline-block;、cssを使用する必要があります。

あなたの場合も使用できますが、適切な場所にスパンを作成するためにもdisplay:block;追加する必要があります。float:left

スクリーンショット： IE9

Answer 2

cssを少し変更するだけです。

.button span {
    background: url("http://i48.tinypic.com/16716yb.png") no-repeat scroll left -52px transparent;
    margin-right: 0.5em;
    direction: rtl;
    display: inline-block;
    width: 10px;
    height: 16px;
}

実例。IE9、Chrome、Firefox、Safari、Operaでテストおよび動作しています:)