【发布时间】：2017-04-22 00:12:27
【问题描述】：
我在 IE9、IE10 和 IOS 8 中使用 transform: rotate(180deg) 时遇到问题，图标正在消失。
我尝试使用 -ms 供应商前缀但没有用。
.down-arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-ms-transform-origin: center;
transform-origin: center;
width: 16px;
height: 16px;
}
svg {
max-height: 100%;
max-width: 100%;
vertical-align: top;
}<div style="display:none">
<svg>
<symbol id="down-arrow">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.527,6.854L0.202,1.042c-0.269-0.288-0.269-0.754,0-1.042h8.621
c0.269,0.288,0.269,0.755,0,1.042" />
</symbol>
</svg>
</div>
<div class="down-arrow">
<svg>
<use xlink:href="#down-arrow"></use>
</svg>
</div>我认为这不仅适用于 SVG，也适用于使用 html 元素。检查这个示例小提琴。
.down-arrow {
width: 0;
height: 0;
border-width: 12px;
border-color: #000 transparent transparent transparent;
border-style: solid;
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-ms-transform-origin: center;
transform-origin: center;
}<div class="down-arrow"></div>【问题讨论】：
-
在 IE9 win7 虚拟机中测试了你的截图，看起来应该是这样 (9.0.8.112.16421)。
-
@NicoO 我也在win7 IE9上测试。但不是 vm。
-
也许它可以帮助您获得modern.ie 或任何其他机器的VM 并在那里进行测试。很难说这样的“正确”是什么。仍然必须支持 IE9 是一种痛苦。祝你好运。 - 只是在一个侧节点上：你在这个页面上用 IE9 测试过你的 sn-p 吗？
-
我认为这可能是关于 jsFiddle 的问题，请参见此处：developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/… 它似乎甚至不适用于 IE11。如果您将相同的代码放在 jsbin 中：developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/… 结果是不同的，如果这个粘贴 bin 似乎也不支持 IE9。
-
仅供参考：“IE 10 及更低版本不支持对 SVG 元素进行 CSS 转换”。来源：caniuse
标签： html css internet-explorer cross-browser internet-explorer-9