Вращение текста с помощью CSS и IE

Question

Мне нужно повернуть текст с помощью CSS.У меня есть следующие правила стиля, но они не работают в Internet Explorer.

.footer #descr span {
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari y Chrome */
    transform: rotate(-20deg);  /* Safari y Chrome */
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

Как повернуть текст в IE с помощью CSS?

Answer 1

Ниже IE9 в Internet Explorer практически отсутствует встроенная поддержка CSS3 или любых других стандартных веб-технологий, таких как SVG, которые позволят вам вращать текст на разных платформах, как вы пожелаете.Microsoft включила два способа поворота элементов (например, текста) начиная с IE6, однако более простой метод работает только с шагом в 90 градусов, например так:

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */

Если вам действительно нужно достичь этого 340 / -На 20 градусов вы включили в свой пример, тогда вам нужно будет попробовать себя в чем-то более сложном, задокументированном здесь: Матричный фильтр MSDN .Учитывая то, как это излишне сложно, быстрый поиск в Google показал хороший калькулятор, который сгенерирует для вас -ms-filter правило CSS: Матричный калькулятор .

Имейте в виду, что обе эти функциине рекомендуется использовать в IE9, который, как мне кажется, поддерживает -ms-transform.В зависимости от того, определит ли Microsoft устаревший как удаленный или рекомендованный против, вы можете проверить, что IE9 не поворачивает ваш текст дважды.

.footer #descr span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
    -ms-transform: rotate(-20deg); /* IE9+ */
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari & Chrome */
    transform: rotate(-20deg);
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

Если быть абсолютно честным, если вы собираетесь использовать HTML5и / или CSS3, тогда я согласился бы с ответом Дюопиксела, что включение библиотеки CSS3 через javascript было бы разумным.Поскольку пользователи Windows XP не могут обновиться до IE8, то для любого коммерческого сайта будет хорошей идеей его поддержка.

Answer 2

Единственное, что сработало в моей ситуации, - это использование наждачной бумаги CSS - как только я ее интегрировал, я попробовал следующий код CSS ...

#vertbar p.name {
    -sand-transform: rotate(180deg);
}

и вуаля!IE поворачивал текст по вертикали, читая снизу вверх.Однако во всех других браузерах эта ориентация считается 270 градусов.

Теперь у меня были другие браузеры, поворачивающие текст под другим углом к ​​IE, как если бы система координат IE была спереди назад (я бы нене удивлюсь ...)

Я подумал, что попробую условный комментарий, чтобы служить правилом -sand-transform только для браузеров IE.По какой-то причине IE проигнорировал это, и поэтому ротация даже не применялась (IE10 игнорирует условные комментарии?)

Так что теперь у меня возникла проблема с тем, чтобы все браузеры делали это одинаково.Переставив порядок правил и установив 180 градусов для IE и 270 градусов для остальных, у меня наконец появилось правило CSS, которое работало для поворота текста по вертикали, читая снизу вверх, в Firefox, Chrome, Safari и IE!

#vertbar p.name {
    -sand-transform: rotate(180deg);
    -webkit-transform: rotate(270deg) !important;
    -moz-transform: rotate(270deg) !important;
    -o-transform: rotate(270deg) !important;

    font-size: 14px;
    text-transform: capitalize;
    display: block;
    white-space: nowrap;
    height: 330px;
    text-align: left;
    color: #FFF;
    line-height: 40px;
    margin-top: 0px;
}

Ура!Надеюсь, это кому-то поможет, я потратил впустую более 2 часов, пытаясь разобраться в этом.: P

Обновление: Просто хотел внести поправку - 270 градусов - это 270 градусов во всех браузерах.Я обнаружил, что у меня есть еще одно правило с поворотом на 90 градусов, которое добавляется ко второму правилу на 180 градусов, чтобы получить общее число 270. Поэтому было интересно отметить, что значение поворота является относительным (дополнительным?), А неабсолют.

Answer 3

Для того, чтобы это работало в IE <9, вам нужно использовать CSS Sand paper, который является полифиллом для CSS-преобразований: <a href="http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/" rel="nofollow">http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Answer 4

Это работает для IE:

-ms-transform: rotate(-20deg);

Answer 5

IE не поддерживает некоторые функции CSS3.Решение: пусть оно изящно ухудшается в IE и позволяет людям с современным браузером получать удовольствие от современных веб-сайтов.

Answer 6

Более старые версии IE (8 и ниже) не поддерживают CSS3