6

我只使用一个 SVG 背景图像创建了一个左右导航按钮，并水平翻转它以获得另一个方向。这在所有支持CSS 2D 转换的浏览器中都可以正常工作，除了 Internet Explorer 9。基本上 CSS 看起来像这样：

div.nav-left, div.nav-right {
    background-image: url('TriangleArrow-Right.svg');
}

div.nav-left {
        -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
                transform: scaleX(-1);
}

我创建了一个jsFiddle ，它在Internet Explorer 10、Firefox、Chrome、Safari 等中看起来像这样：

在 Chrome 22 中渲染

但实际上在 IE9 中看起来像这样：

在 Internet Explorer 9 中呈现

我添加了一个大于号来说明按钮应该指向的方向。实际上您可以看到，IE9 将转换正确地应用于文本，但对 SVG 背景图像却完全相反。

如果我将 SVG 背景图像更改为 PNG，则在 IE9 中一切正常，但请参阅此jsFiddle。

我无法找到有关此的任何信息。这似乎是一个错误，因为 IE9 应该正确支持 CSS 转换和SVG 作为 CSS 背景。

4

3 回答 3

2

我认为您需要使用IE 的特殊语法：

div.nav-left {
    -webkit-transform: scaleX(-1);
    /*-ms-transform: scaleX(-1);*/
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    transform: scaleX(-1);
    left: -50px;
}

http://jsfiddle.net/g2y86/1/

虽然看起来不是很锋利，也许有更好的方法。

编辑

对于翻转，试试这个（注意，-ms-filter和filter行都适用于 IE）：

div.nav-left {
    -webkit-transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
    transform: scaleX(-1);
    left: -50px;
}

http://jsfiddle.net/2cPYR/

于 2012-10-31T10:41:08.953 回答
0

根据我的尝试，scaleX-property 确实不适用于 svg 背景图像上的负数。如果您对尝试转换的 div 应用不同颜色的边框，您可以看到，它实际上已正确转换，但背景图像不适应其容器。

如果你只是想解决眼前的问题，你可以使用-ms-transform: rotate(180deg);，svg 似乎知道它应该在这里做什么。

于 2012-10-31T11:01:58.633 回答
0

我曾经filter: FlipV;容纳ie9

-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9
于 2016-09-12T22:10:26.697 回答