Блог

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

http://msdn.microsoft.com/en-us/library/ms533014 (v= против 85).aspx

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

но IE 9 поддерживает масштабирование https://developer.mozilla.org/en/CSS/transform

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