html - CSS 转换在 Internet Explorer 7 及更低版本中不起作用

Question

我正在使用 CSS3 样式表来缩放图像，但它在 Internet Explorer 7 及更低版本中不起作用。

.resultitem{
  opacity: 0.75;
  transition: 0.75s ease-in-out;

}
.resultitem:hover {
  opacity: 1;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
          display:block;
}

Answer 1

IE9 支持 CSS3 转换，-ms-trasform但对于旧版本没有任何方法，只能使用过滤器：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.3, M12=0,
    M21=0, M22=1.3);

其中 1.3 是您的比例因子。

M11、M12、M21 和 M22 是将应用于元素的变换矩阵的值。

请注意，此矩阵不会缩放中心的矩形。解决这个问题的最好方法是使用一些负边距，减去一半宽度乘以左边距的因子，减去一半高度乘以顶部的因子。

链接：
- MSDN
-转换矩阵

Answer 2

任何浏览器都不支持 transform 属性。

Internet Explorer(IE9+) 支持另一种选择，即 -ms-transform 属性（仅限 2D 转换）。

Firefox 支持另一种选择，即 -moz-transform 属性（仅限 2D 转换）。

Opera 支持另一种选择，即 -o-transform 属性（仅限 2D 变换）。

Safari 和 Chrome 支持另一种选择，即 -webkit-transform 属性（3D 和 2D 转换）。