ИЕ9 РТЛ фоне позиционирования

Скрипка: http://jsfiddle.net/bHRVe/

Для стрелки используется спрайт. Фоновое положение отлично в Firefox и IE8:

FF скриншот

Однако направление RTL, похоже, сбрасывает IE9, стрелка больше не существует:

IE9 скриншот

Если я изменю позиционирование с left -52px на right -52px, то он отображается правильно в IE9, но ломается в других браузерах.

Есть ли способ исправить это с помощью того же CSS? (без условных обозначений или хаки)

2 4
css internet-explorer-9 right-to-left

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:)

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

Введите описание изображения здесь

2