IE9 RTL后台定位

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>元素是内联元素。我们需要根据需要使用css制作display:block;或display:inline-block;。

在您的情况下，您也可以使用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;
}

Live example。在IE9，Chrome，Firefox，Safari和Opera中经过测试和使用：）