У меня есть элемент, который должен быть вертикальным в дизайне, который я сделал. У меня есть css для этого, чтобы работать во всех браузерах, кроме IE9. Я использовал фильтр для IE7 и IE8:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Это, как представляется, делает мой элемент прозрачным в IE9, а CSS3 'tranform' porperty, похоже, ничего не делает!
Кто-нибудь знает о вращающихся элементах в IE9?
Действительно оцените помощь!
Ш.
Стандартный CSS3 rotate должен работать в IE9, но я считаю, что вам нужно предоставить ему префикс поставщика, например:
-ms-transform: rotate(10deg);
Возможно, он не работает в бета-версии; если нет, попробуйте загрузить текущую версию предварительного просмотра (предварительный просмотр 7), которая является более поздней версией бета-версии. У меня нет бета-версии для тестирования, поэтому я не могу подтвердить, была ли она в этой версии или нет. Окончательная версия релиза определенно намечена на ее поддержку.
Я также могу подтвердить, что IE-специфическое свойство filter было сброшено в IE9.
[Изменить]
Люди попросили дополнительную документацию. Как говорится, это довольно ограниченно, но я нашел эту страницу: http://css3please.com/, которая полезна для тестирования различных функций CSS3 во всех браузерах.
Но тестирование функции поворота на этой странице в предварительном просмотре IE9 вызвало ее сбой довольно эффектно.
Однако я провел некоторые независимые тесты, используя -ms-transform:rotate() в IE9 на своих тестовых страницах, и он работает нормально. Поэтому я пришел к выводу, что эта функция реализована, но есть некоторые ошибки, возможно связанные с ее динамической настройкой.
Еще одна полезная контрольная точка, для которой реализованы функции, в которых браузеры - www.canIuse.com - см. http://caniuse.com/#search=rotation
[EDIT]
Возрождение этого старого ответа, потому что я недавно узнал о взломе под названием CSS Sandpaper, который имеет отношение к вопросу и может облегчить задачу.
Hack реализует поддержку стандартного CSS transform для старых версий IE. Итак, теперь вы можете добавить в свой CSS следующее:
-sand-transform: rotate(10deg);
... и работать в IE 6/7/8 без использования синтаксиса filter. (конечно, он по-прежнему использует синтаксис фильтра за кулисами, но это значительно упрощает управление, поскольку использует аналогичный синтаксис для других браузеров)
Попробуйте это
<!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>
У меня также были проблемы с преобразованиями в IE9, я использовал -ms-transform: rotate(10deg), и это не сработало. Пробовал все, что мог, но проблема была в режиме браузера, чтобы сделать преобразования, вам нужно установить режим совместимости на "Стандартный IE9".
Я знаю, что это старо, но у меня была эта же проблема, я нашел этот пост, и хотя он не объяснил точно, что случилось, это помогло мне правильно ответить - так что надеюсь, мой ответ поможет кому-то другому, кто может иметь аналогичную проблему для моей.
У меня был элемент, который я хотел повернуть вертикально, поэтому, естественно, я добавил фильтр: для IE8, а затем для свойства -ms-transform для IE9. Я обнаружил, что наличие свойства -ms-transform И фильтр, применяемый к одному и тому же элементу, заставляет IE9 отображать элемент очень плохо. Мое решение:
Если вы используете свойство transform-origin, добавьте его и для MS (-ms-transform-origin: left bottom;). Если вы не видите свой элемент, возможно, он вращается на нем по средней оси и таким образом оставляет страницу как-то - так что дважды проверьте это.
Переместите фильтр: свойство для IE7 & 8 в отдельную таблицу стилей и используйте IE, чтобы вставить эту таблицу стилей для браузеров, меньшую, чем IE9. Таким образом, это не влияет на стили IE9, и все должно работать нормально.
Обязательно используйте правильный тег DOCTYPE; если у вас это неправильно IE9 не будет работать должным образом.