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

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

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

это, однако, похоже, делает мой элемент прозрачным в IE9, а порперти CSS3 "tranform", похоже, ничего не делает!

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

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

У.

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

4 ответов

стандартный поворот CSS3 должен работать в 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: Left bottom;). Если вы не видите свой элемент, может быть, он вращается на средней оси и, таким образом, каким - то образом покидает страницу-так что дважды проверьте это.

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

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

3