logo标签列表

在IE9和IE10中旋转图标会消失

htmlcssinternet-explorercross-browserinternet-explorer-9
5

当使用transform: rotate(180deg)时，我在IE9、IE10和IOS 8中遇到了问题，图标消失了。

我尝试使用-ms供应商前缀，但没有用。

JSFIDDLE
在Modern.ie上测试

.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元素。请查看此示例fiddle。

.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）。 - Nico O
@NicoO 我也在测试Win7 IE9，但不是在虚拟机上。 - Mr_Green
1
我认为这可能是关于jsFiddle的问题，请参见此处：https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/?url=http%3A%2F%2Ffiddle.jshell.net%2Frxz4saLa%2F2%2Fshow%2Flight%2F，它似乎甚至无法在IE11上工作。如果您将相同的代码放入jsbin中：https://developer.microsoft.com/en-us/microsoft-edge/tools/screenshots/?url=https%3A%2F%2Foutput.jsbin.com%2Ffudeciwaki，结果是不同的，而且这个粘贴板似乎也不支持IE9。 - Nico O
1
FYI: "IE 10及以下版本不支持在SVG元素上使用CSS转换特性"。来源：caniuse - a better oliver
@zeroflagL 我也是这么想的。请查看我在帖子中没有使用svg的下面的fiddle。问题仍然存在。 - Mr_Green
显示剩余6条评论
1个回答
4
一个团队成员本应该在现网站上对其进行测试，但他没有:P。希望当我们再次跳转到该问题时它能够正常工作。谢谢:) - Mr_Green
感谢@Mr_Green，很高兴能够帮助到您，我相信它会很好地工作 :) - Kresimir Pendic
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接