Поворот текста - проблема с IE - PullRequest
Новая
       29

Поворот текста - проблема с IE

4 голосов
/ 29 августа 2011

Привет! Я пытаюсь повернуть текст, но я сталкиваюсь с некоторыми проблемами с IE 8 и 9 

.casaText{
     display:block;     
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-filter:rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    position:relative;

В IE он не вращается.Кто-нибудь может сказать мне, почему ??

спасибо

Ответы [ 4 ]

1 голос
/ 07 апреля 2012

Использовать матрицу для вращения:

Вот для -90deg

filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, sizingMethod='auto expand');
zoom: 1;
1 голос
/ 20 марта 2012

В вашем коде ошибка

-ms-filter:rotate(-90deg);

Для кроссбраузерной ротации используйте этот синтаксис из css3please.com , который в вашем случае будет выглядеть так: 

.casaText{
    -webkit-transform: rotate(-90deg);  /* Saf3.1+, Chrome */
       -moz-transform: rotate(-90deg);  /* FF3.5+ */
        -ms-transform: rotate(-90deg);  /* IE9 */
         -o-transform: rotate(-90deg);  /* Opera 10.5 */
            transform: rotate(-90deg);
               filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, sizingMethod='auto expand'); /* IE 6-9 */
                 zoom: 1; /* IE hasLayout trigger */
}
1 голос
/ 30 августа 2011

Я думаю, что это свойство вызывает проблему: 

-ms-filter:rotate(-90deg);

Я не знаю ни одного проприетарного фильтра IE, подобного этому. Попробуйте это: 

.casaText{
     display:block;     
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    white-space:nowrap;
    position:relative;
}
0 голосов
/ 07 апреля 2012

Я использовал следующее, и оно работало хорошо. Я нашел его на css-tricks.com (это отличный ресурс). Во всяком случае, работал на меня. Я понимаю, что уже немного поздно - ха - но, возможно, это поможет кому-то еще, кто найдет это, как я. 

filter:progid:DXImageTransform.Microsoft.Matrix(M11=$m11, M12=$m12, M21=$m21, M22=$m22, sizingMethod='auto expand');
...