CSS3 преобразование: поворот; в IE9

У меня есть элемент, который должен быть вертикальным в дизайне, я сделал. У меня есть css для этого, чтобы работать во всех браузерах, кроме IE9. Я использовал фильтр для IE7 & IE8:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

это, однако, кажется, чтобы сделать мой элемент прозрачным в IE9 и CSS3' tranform ' porperty, кажется, ничего не делает!

кто-нибудь вообще знает о вращающихся элементах в IE9?

очень ценю помощь!

W.

4 77
css css3 internet-explorer-8 internet-explorer-9 rotation

4 ответа:

стандартный CSS3 rotate должен работать в IE9, но я считаю, что вам нужно дать ему префикс поставщика, например:

  -ms-transform: rotate(10deg);

возможно, что он может не работать в бета-версии; если нет, попробуйте загрузить текущую версию предварительного просмотра (preview 7), которая является более поздней версией бета-версии. У меня нет бета-версии для тестирования, поэтому я не могу подтвердить, была ли она в этой версии или нет. Окончательная версия релиза определенно запланирована для его поддержки.

Я тоже могу подтвердите, что IE-specific filter свойство было удалено в IE9.

[Edit]
Люди запросили дополнительную документацию. Как говорится, это довольно ограничено, но я нашел эту страницу:http://css3please.com/ что полезно для тестирования различных функций CSS3 во всех браузерах.

но тестирование функции поворота на этой странице в IE9 preview вызвало ее довольно впечатляющий сбой.

однако я сделал некоторые независимые тесты с использованием -ms-transform:rotate() в IE9 на моих собственных тестовых страницах, и он работает нормально. Таким образом, мой вывод заключается в том, что функция реализована, но имеет некоторые ошибки, возможно, связанные с ее динамической настройкой.

еще одна полезная точка отсчета, для которой реализованы функции в каких браузерах www.canIuse.com -смотрите http://caniuse.com/#search=rotation

[EDIT]
Возрождая этот старый ответ, потому что я недавно узнал о взломе под названием CSS Наждачная бумага какое имеет отношение к вопросу и может сделать вещи проще.

Хак реализует поддержку стандартного CSS transform для старых версий IE. Так что теперь вы можете добавить следующее в ваш CSS:

-sand-transform: rotate(10deg);

...и это работает в IE 6/7/8, без необходимости использовать filter синтаксис. (конечно, он по-прежнему использует синтаксис фильтра за кулисами, но это делает его намного проще в управлении, потому что он использует аналогичный синтаксис для других браузеров)

137

попробуй такое

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}
.rotate {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
}
</style>
</head>

<body>
<div class="rotate">Alpesh</div>
</body>
</html>
5

У меня также были проблемы с преобразованиями в IE9, я использовал -ms-transform: rotate(10deg) и это не сработало. Пробовал все, что мог, но проблема была в режиме браузера, чтобы преобразования работали, вам нужно установить режим совместимости на "стандартный IE9".

4

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

У меня был элемент, который я хотел повернуть вертикально, поэтому, естественно, я добавил фильтр: для IE8, а затем свойство-ms-transform для IE9. Я обнаружил, что свойство-ms-transform и фильтр применяются к одному и тому же элемент вызывает IE9 для визуализации элемента очень плохо. Мое решение:

  1. Если вы используете свойство transform-origin, добавьте его и для MS (- ms-transform-origin: слева внизу;). Если вы не видите свой элемент, это может быть то, что он вращается на своей средней оси и, таким образом, каким - то образом покидает страницу-поэтому дважды проверьте это.

  2. переместите свойство filter: для IE7&8 в отдельную таблицу стилей и используйте условие IE для вставки этой таблицы стилей для браузеры меньше, чем IE9. Таким образом, это не влияет на стили IE9, и все должно работать нормально.

  3. убедитесь, что вы используете правильный тег DOCTYPE, а также; если у вас есть это неправильно IE9 не будет работать должным образом.

3