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

Posted

技术标签:

【中文标题】旋转时图标在 IE9 和 IE10 中消失【英文标题】:Icon disappearing in IE9 and IE10 when rotated 【发布时间】:2017-04-22 00:12:27 【问题描述】:

我在 IE9、IE10 和 ios 8 中使用 transform: rotate(180deg) 时遇到问题,图标正在消失。

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

JSFIDDLETest on 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 元素。检查这个示例小提琴。

.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;
&lt;div class="down-arrow"&gt;&lt;/div&gt;

【问题讨论】:

在 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 【参考方案1】:

你可以使用SVG for Everybody,

我在这里创建了测试笔:http://codepen.io/mkdizajn/pen/PbyZoM 我也在 WIN 7 和 IE9 上进行了测试,图像在这里:

https://app.crossbrowsertesting.com/public/ic7b2b4fec0f754a/livetests/6573248/snapshots/z1482ad843f3e76a100f

我唯一做的就是包含了外部 JS 文件:

https://cdnjs.cloudflare.com/ajax/libs/svg4everybody/2.1.3/svg4everybody.min.js

并调用

svg4everybody();

希望对你有帮助

【讨论】:

一个团队成员应该在现场测试它,但他没有:P。我希望当我们再次跳到那个问题时这能奏效。谢谢:) 感谢@Mr_Green 很高兴它有帮助,我相信它会正常工作:)

以上是关于旋转时图标在 IE9 和 IE10 中消失的主要内容,如果未能解决你的问题,请参考以下文章

使用 IE9 支持的 jQuery 旋转 div

CSS3 变换:旋转;在 IE9 中

IE9 和 Z-index:元素在悬停时消失在父级后面

传智CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转

旋转时 UIScrollView 的指示器消失

UIBarButtons 带有系统项的样式,旋转后消失