css - IE9 RTL后台定位

Question

fiddle :http://jsfiddle.net/bHRVe/

Sprite 被用于箭头。背景位置在 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