CSS变换在IE浏览器中无法正常工作

Question

我有这个样式表

.rotate div img
{
    -webkit-transform:  translate(-18cm, 2cm) rotate(-90deg); /* WebKit */
    -webkit-transform-origin: top right; 

    -moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */
    -moz-transform-origin: top right;

    -o-transform: rotate(90deg); /* Opera */
    -o-transform-origin: top center; 

    -ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */
    -ms-transform-origin: top right;

    -sand-transform: translate(-18cm, 2.5cm) rotate(-90deg);
    -sand-transform-origin top right;

    max-width: 100% !important;

}

我在使用IE浏览器时遇到了问题，虽然变换效果在屏幕上显示出来了，但是当我点击打印按钮时，打印出来的结果却没有应用这些变换效果。

(在媒体中添加屏幕以查看效果，在打印之前)

在Firefox和Chrome中运行良好。

编辑

是的，我是在测试IE9。

昨天玩了一下，我注意到图像确实进行了变换处理，但是发送到打印机的图像却没有应用这些变换效果。

- CheGueVerra

---

这是一个有点棘手的问题，你遇到的是哪个版本的IE浏览器问题？只有IE9和IE10提供基本支持，而且只有IE10支持3D：https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility - kunalbhat

这里有一个关于IE9无法打印转换的相关问题：http://stackoverflow.com/q/7868988/2930477 - misterManSam

Answer 1

-ms-transform在IE10+已经不存在。IE8及更早版本不支持CSS变换；IE9仅使用-ms-transform进行变换；IE10及更新版本只使用无前缀的transform进行变换。

如需更多信息，请参见http://caniuse.com/#feat=transforms2d。

- Mooseman

Answer 2

我曾经遇到过同样的问题，但是通过将媒体属性设置为以下样式标签来解决了

<style type="text/css" media="print">

- Sravan

Answer 3

不需要花哨的前缀，只需使用普通的 transform 来针对 MS IE！

- 3066d0