HTML置顶图标消失,html – 旋转时IE9和IE10中的图标消失

我在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;

}

我认为这不仅适用于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;

}