Преобразование CSS3: масштаб в IE

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

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

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

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

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

Ответы

Ответ 1

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);

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

Ответ 2

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

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

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

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

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

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

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

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

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