CSS3 преобразование: масштаб в IE - PullRequest
18 голосов
/ 18 октября 2011

Я хотел бы использовать свойство CSS3 transform: scale.

div
{
     transform: scale(0.5,0.5);
}

Есть ли способ имитировать это в Internet Explorer 8 и ниже? Может быть что-то с filter или Javascript?

Я искал в Интернете безрезультатно.

Большое спасибо, Винсент

Ответы [ 4 ]

33 голосов
/ 18 октября 2011

IE9 поддерживает преобразование:

-ms-transform: scale(0.5,0.5);

Для других версий IE существует сложный синтаксис.Примерно так:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.5320888862379554, M12=-1.2855752193730787,
    M21=1.2855752193730796, M22=1.5320888862379558);

Смотрите здесь для дополнительной информации.

13 голосов
/ 18 октября 2011

Нет, IE8 и более ранние версии не поддерживают стандартный стиль transform.Хотя IE9 поддерживает его.

Существуют решения, которые можно попробовать использовать в стиле filter, но они будут грязными.

Но для простого случая, который вы описываете в вопросе(в основном простое уменьшение), вы можете использовать проприетарное свойство IE zoom.

Поскольку оно нестандартное, наиболее распространенное использование zoom - это zoom:1, который используется дляисправлено несколько ошибок в макете IE (особенно в IE6 и IE7).Но он также выполняет реальное масштабирование, и вы можете использовать zoom:0.5 для достижения эффекта, который вы ищете.

Преимущество использования zoom в том, что он работает в IE, как и любой другойдругое обычное свойство CSS (альтернатива filter имеет некоторые серьезные особенности рендеринга, о которых вам нужно знать).

Единственный недостаток использования zoom заключается в том, что вам нужно отключить его в IE9.или позже, иначе это будет взаимодействовать с вашим стилем transform и иметь некоторые нежелательные эффекты.Я не из тех, кто обычно поддерживает использование хаков CSS, но вы можете использовать хак /9 (, задокументированный здесь ), чтобы он влиял только на IE8 и более ранние версии, то есть вы можете указать оба transform и zoom в той же таблице стилей, например, так:

div {
  transform: scale(0.5,0.5);
  zoom: 0.5\9;
}

В противном случае вам нужно будет использовать условные комментарии, чтобы определить, следует ли использовать его.

Очевидно, что если вы хотитесделайте что-нибудь более сложное, чем простая пропорциональная шкала, тогда zoom не подойдет, но для простого случая, подобного тому, который задан в вашем вопросе, он будет идеальным.

1 голос
/ 18 октября 2011

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

хотя фильтры в IE не просты в использовании, и они не всегда сочетаются с другими эффектами css ....

но шкала поддержки IE 9 https://developer.mozilla.org/en/CSS/transform

0 голосов
/ 30 июня 2012

Попробуйте это: https://github.com/pbakaus/transformie

...