栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

IE中的CSS旋转属性

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

IE中的CSS旋转属性

要在IE中旋转45度,您需要在样式表中添加以下代码:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; 

您将从上面的内容中注意到IE8与IE6 / 7具有不同的语法。如果要支持IE的所有版本,则需要提供两行代码。

弧度中有可怕的数字。如果您要使用45度以外的角度,则需要自己计算出数字(如果要寻找)。

还要注意,由于过滤器字符串中的冒号符号未转义,因此IE6/7语法会导致其他浏览器出现问题,这意味着它是无效的CSS。在我的测试中,这会导致Firefox忽略过滤器之后的所有CSS代码。这是您需要注意的事情,如果被它所吸引,可能会导致数小时的混乱。我通过在其他浏览器无法加载的单独的样式表中包含特定于IE的内容来解决此问题。

当前所有其他浏览器(包括IE9和IE10-是的!)都支持CSS3

transform
样式(尽管通常带有供应商前缀),因此您可以使用以下代码在所有其他浏览器中实现相同的效果:

-moz-transform: rotate(45deg);  -o-transform: rotate(45deg);  -webkit-transform: rotate(45deg);  transform: rotate(45deg);  

希望能有所帮助。

编辑

由于此答案仍在投票中,因此我觉得我应该使用有关称为CSSSandpaper的Javascript库的信息来更新它,即使在较旧的IE版本中,该库也允许您使用(接近)标准CSS代码进行旋转。

将CSS沙纸添加到您的站点后,您应该能够为IE6-8编写以下CSS代码:

-sand-transform: rotate(40deg);

filter
您通常需要在IE中使用的传统样式容易得多。

编辑

还要注意一个专门针对IE9(仅适用于IE9)的怪癖,它同时支持标准

transform
IE和旧样式IE
-ms-filter
。如果同时指定了它们,则可能导致IE9完全混乱,并仅在元素原本所在的位置呈现一个纯黑框。最好的解决方案是
filter
使用上面提到的“Sandpaper” polyfill 避免样式。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/470664.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号