Отображение текста на 45 градусов во всех браузерах

Question

У меня есть особая проблема, связанная с требованием отобразить фрагмент текста под углом 45 градусов.Требуется поддержка «всех браузеров», однако мне удалось исключить IE6 (спасибо вам большое) и более старые версии Mozilla / Opera.Требование для этого экрана выглядит следующим образом:

Я могу отсортировать это в совместимых с CSS3 браузерах (последние версии почти всего), используя этот CSS / HTML:

<style type="text/css">
.homepage-top .red-corner {
    position: absolute;
    right: 0px;
    top: 300px;
    width: 0px;
    height: 0px;
    border-top: 55px solid #e11e2d;
    border-left: 55px solid transparent;
    z-index: 9;
}

.homepage-top .free {
    position: absolute;
    right: 3px;
    top: 310px;
    text-transform: uppercase;
    color: white;
    font-size: 10pt;
    font-weight: bold;
    z-index: 10;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -sand-transform: rotate(45deg);
    transform: rotate(45deg);
}
</style>

<div class="red-corner"><!-- --></div>
<div class="free">free</div>

Хорошо работает с IE9 и более новыми Firefox, Safari и Opera.Затем мне нужно, чтобы IE7 и IE8 работали - и вот тут это становится интересным.Я могу использовать filter в IE7 и -ms-filter в IE8 - и я получаю очень интересные результаты.

Фильтр / -ms-фильтр выглядит следующим образом:

filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

Добавлениеэто к селектору .homepage-top .free заставляет IE7 правильно отображать повернутый текст (хотя и с некоторым оттенком черного до белых букв, но я могу жить с этим) - но он игнорирует абсолютно ВСЕ в файле css после этой строки.Удаление строки filter восстанавливает остальную часть CSS, но, естественно, не поворачивает текст.

В IE8 все работает правильно, однако добавление этого в селектор приводит к сбоям в работе IE9.Похоже, что IE9 пытается использовать свойства -ms-filter и -ms-transform - и это вызывает некоторую внутреннюю путаницу.В результате отображение IE9 выглядит следующим образом:

Очевидно, что здесь что-то не так - но как мне исправить это, чтобы оно работало в IE7, 8 и 9??

Большое спасибо заранее.

Answer 1

Вы можете использовать условные комментарии, чтобы предоставить каждой MSIE свою собственную таблицу стилей.http://de.wikipedia.org/wiki/Conditional_Comments

<!--[if lte IE 8]> <style>...</style> <![endif]-->

<!--[if IE 9]> <style>...</style> <![endif]-->

Answer 2

Можно ли просто использовать изображение? Обычно я предпочитаю стилизовать простой текст с помощью CSS, а не использовать изображение, но, поскольку вам необходимо поддерживать старые браузеры, изображение является гораздо более простым решением.