【问题标题】:CSS transform not working in Internet Explorer 7 and belowCSS 转换在 Internet Explorer 7 及更低版本中不起作用
【发布时间】:2013-04-04 15:27:12
【问题描述】:

我正在使用 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;
}

【问题讨论】:

  • 哪个IE版本不工作?
  • 它不适用于 IE 7 及更低版本
  • IE 在过去 2-3 年内只有少数版本支持发布。否则不支持
  • 即使没有更新的IE8也不行
  • :) 它也不能在Mosaic 或任何足够旧的浏览器中工作......到目前为止你的问题只是一个声明......

标签: html css


【解决方案1】:

IE9 支持使用-ms-trasform 进行 CSS3 转换,但对于旧版本,除了使用过滤器之外别无他法:

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
- Transformation Matrix

【讨论】:

    【解决方案2】:

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

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

    Firefox 支持另一种选择,即 -moz-transform 属性(仅限 2D 转换)。

    Opera 支持另一种选择,即 -o-transform 属性(仅限 2D 变换)。

    Safari 和 Chrome 支持另一种选择,即 -webkit-transform 属性(3D 和 2D 转换)。

    【讨论】:

    • 旧消息...许多浏览器现在支持无前缀的transform 属性。
    • @web2008 是否可以将该代码从 css3 转换为 css2?
    • 我认为这不可能。如果浏览器不支持任何 css3 选择器,则我们无法使用 css2 提供该选择器效果。
    猜你喜欢
    • 1970-01-01
    • 2012-01-26
    • 2012-04-19
    • 2012-11-09
    • 1970-01-01
    • 2014-11-19
    • 2012-06-07
    • 2011-12-07
    • 1970-01-01
    相关资源
    最近更新 更多