css - 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>元素是内联元素。我们需要根据需要制作它们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 中测试和工作:)