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

概述我在IE9,IE10和 IOS 8中遇到问题时使用transform：rotate(180deg),图标正在消失. 我尝试使用-ms供应商前缀但没有用. JSFIDDLE Test on Modern.ie .down-arrow { -ms-transform: rotate(180deg); transform: rotate(180deg); -ms-transform-orig 我在IE9,IE10和 IOS 8中遇到问题时使用transform：rotate(180deg),图标正在消失.

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

JSFIDDLE
Test 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 >  <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.621c0.269,0.288,0.269,0.755,1.042" />    </symbol>  </svg></div><div >  <svg>    <use xlink:@R_301_6839@="#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 ></div>

解决方法 你可以用 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();

希望有所帮助

总结

以上是内存溢出为你收集整理的html – 旋转时IE9和IE10中的图标消失全部内容，希望文章能够帮你解决html – 旋转时IE9和IE10中的图标消失所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。