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

Question

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

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

Modern.ie
上的JSFIDDLE测试

.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>

Answer 1

你可以为每个人使用SVG ，

我在这里创建了测试笔：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();

希望有帮助