我在 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 元素。检查此示例 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>
最佳答案
你可以使用SVG for Everybody ,
我在这里创建了测试笔:http://codepen.io/mkdizajn/pen/PbyZoM我也在 WIN 7 和 IE9 上测试过,图像在这里:
我唯一做的就是包含外部 JS 文件:
https://cdnjs.cloudflare.com/ajax/libs/svg4everybody/2.1.3/svg4everybody.min.js
并调用了
svg4everybody();
希望对你有帮助
关于html - 旋转时图标在 IE9 和 IE10 中消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41010890/