CSS3“转换”属性在 IE9 中的工作方式不同答案

【问题标题】：CSS3 "transform" property works different in IE9CSS3“转换”属性在 IE9 中的工作方式不同
【发布时间】：2013-11-22 08:00:18
【问题描述】：

我在这里用 SVG、CSS3 transform 和不同的浏览器尝试了一些东西。
这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
    <style type="text/css">
    .svg-holder {
        text-align: center;
        padding: 50px;
    }
    .img1 {
        transform: rotate(180deg); /* IE10 and Mozilla */
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Chrome and Safari */
    }
    .img2 {
        transform: scale(3,3); /* IE10 and Mozilla */
        -ms-transform: scale(3,3); /* IE 9 */
        -webkit-transform: scale(3,3); /* Chrome and Safari */
    }
    .bg {
        background-color: yellow;
        background-image: url(arrow.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg);
    }
    </style>
</head>
<body>
    <div class="svg-holder img1">
        <img src="arrow.svg" class="red-arrow">
    </div>
    <div class="svg-holder img2">
        <img src="arrow.svg">
    </div>

    <div class="svg-holder bg">
    </div>
</body>
</html>

“arrow.svg”文件内容是（但您可以使用任何您喜欢的 .svg）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="35.551px" height="35.551px" viewBox="0 0 35.551 35.551" enable-background="new 0 0 35.551 35.551" xml:space="preserve">
<polygon fill="#404040" points="17.775,0 0,17.775 11.109,17.775 11.109,35.551 24.441,35.551 24.441,17.775 35.551,17.775 "/>
</svg>

但是，上述代码的呈现方式在 IE9 和其他（普通）浏览器之间是不同的。注意突出显示的箭头（默认箭头指向向上），类为.bg

这是来自 Chrome 的屏幕截图，箭头旋转 90 度并指向 RIGHT（呈现此代码的正确方法）：

这是 IE9 的截图，箭头旋转 180 度并指向 DOWN:

谁能解释一下？

编辑：

JSFiddle with simpler example

【问题讨论】：

IE 总是正确的：saveie6.com

标签： html css svg internet-explorer-9

【解决方案1】：

根据 Microsoft 的文档，CSS 转换属性似乎无法在 SVG 上的 IE 浏览器中使用。我自己也遇到了同样的问题。

http://msdn.microsoft.com/en-us/library/ie/hh801971(v=vs.85).aspx

更新

确实，为了完全跨浏览器应用转换，我不得不在 SVG 标签中的元素上使用实际的 transform 属性，例如：

transform="matrix(.76 0 0 .76 241 110 )"

（例如，将其缩放到 0.76，向左平移 241，向下平移 110）

【讨论】：

这是一个将度数转换为矩阵的便捷工具：boogdesign.com/examples/transforms/matrix-calculator.html

【解决方案2】：

我试了一下：http://jsfiddle.net/c6brV/

.logo {
 background-image: url(http://upload.wikimedia.org/wikipedia/commons/a/aa/Aiga_uparrow.svg);
 background-repeat: no-repeat;
 background-size: contain;
 width: 100px;
 height: 100px;
 margin: 0 auto;
 transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg);

}

我使用了不同的维基媒体箭头。它在我尝试过的所有 IE 版本中都指向正确：11、10 和 9。

也许你的问题的根源不同？

【讨论】：

首先，谢谢！不幸的是，它并没有解决我的问题。我在 IE9 V.9.0.8112.16421 上测试（更新版本：9.0.17 - KB2838727）

【解决方案3】：

我最近发现了一个名为 CSS Sandpaper 的 hack，它与问题相关，可能会使事情变得更容易。

该 hack 实现了对旧版本 IE 的标准 CSS 转换的支持。所以现在您可以将以下内容添加到您的 CSS 中：

-sand-transform: rotate(10deg);

否则，您也可以尝试使用以下代码来做您需要的事情：

-ms-transform: matrix(0.000,1,-1,0.000,0,0);

IE 9 在使用 deg 时有时会出现这些问题

【讨论】：

也没有工作。请查看之前的评论以查看我的 IE9 浏览器详细信息