CSS3“轉換”屬性在IE9中的工作方式不同

Question

我正在嘗試使用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注意突出顯示的箭頭（默認情況下箭頭指向UP）

以下是Chrome的屏幕截圖，箭頭旋轉90度並指向RIGHT（渲染此代碼的正確方法）：

這是IE9的截圖，箭頭旋轉180度，點向下：

有人可以解釋一下嗎？

編輯：

JSFiddle有一個更簡單的例子

Answer 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 )"

（例如，將其縮小為.76，將其翻譯為241，然后將其翻譯為110）

Answer 2

我最近發現了一個名為CSS Sandpaper的黑客，它與問題相關，可能會讓事情變得更容易。

對於舊版本的IE，hack實現了對標准CSS轉換的支持。 所以現在你可以在CSS中添加以下內容：

-sand-transform: rotate(10deg);

否則，您也可以嘗試使用以下代碼來執行您需要的操作：

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

IE 9在使用deg時有時會出現這些問題

Answer 3

我試着用這個小提琴： 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。

也許你的問題的根源是不同的？

在此輸入圖像描述

CSS3“轉換”屬性在IE9中的工作方式不同

問題描述

3 個解決方案

解決方案1
2 2014-05-05 18:03:39

解決方案2
0 2013-11-16 09:30:09

解決方案3
-1

CSS3“轉換”屬性在IE9中的工作方式不同

問題描述

3 個解決方案

解決方案1 2 2014-05-05 18:03:39

解決方案2 0 2013-11-16 09:30:09

解決方案3 -1

解決方案1
2 2014-05-05 18:03:39

解決方案2
0 2013-11-16 09:30:09

解決方案3
-1