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

У меня возникла своеобразная проблема, связанная с требованием отображать фрагмент текста под углом 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?

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