Фидл: http://jsfiddle.net/bHRVe/IE9 РТЛ фон позиционирования
Спрайт используется для стрелки. Фон позиция хорошо в Firefox и IE8:
Однако направление RTL, кажется, сбросив IE9, стрелка больше не существует:
Если изменить позиционирование от left -52px до right -52px, то оно корректно отображается в IE9, но ломается в других браузерах.
Есть ли способ исправить это, используя тот же CSS? (Без условных или хаки)
Просто измените ваш 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 :)
Я придумал точно такой же css. Вам нужно добавить свойства ширины, высоты и отображения. IE не подходит для «гадания» измерений, и элемент span может вести себя неожиданно, если его «дисплей не установлен». – Shahar
Это было бы мое первое предложение - IE действительно нуждается в чем-то необычном, чтобы быть четко определенным. Когда он начинает работать над собой, вещи могут стать странными. Сторона примечания - вы используете какой-либо сброс CSS? –
Да, да, но это добрый глобальный сброс, а не только для IE. – Morpheus
Вот чистый 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:
Примечание: Это хорошая практика, если вы поместили пробел ( ) в пустой элемент, потому что некоторое время он hel ps в браузере.
<a class="button" href="#">
<b>تم, غزو عل جنوب</b>
<br/>
<u>ب ان. Testما وص</u>
<span> </span>
</a>
Дополнительное примечание: По умолчанию <span> и <a> элементы встроенные элементы. мы должны сделать их display:block; или display:inline-block; используя css согласно нашей потребности.
В вашем случае вы также можете использовать display:block;, но тогда вам нужно добавить float:left, чтобы сделать пролет в нужном месте.
Screen Shot: IE9
Не против него на всех, но не может посильно использовать его для этого конкретного проекта. Это был бы последний вариант. – Jen
Есть ли какие-либо соображения относительно того, почему IE9 интерпретирует фоновое положение в макетах RTL по-разному? Мне сложно найти документацию. – Jen