您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

IE中的CSS旋转属性

IE中的CSS旋转属性

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

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

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

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

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

当前所有其他浏览器(包括IE9和IE10-是的!)都支持CSS3transform样式(尽管通常带有供应商前缀),因此您可以使用以下代码在所有其他浏览器中实现相同的效果

-moz-transform: rotate(45deg);  /* FF3.5/3.6 */
-o-transform: rotate(45deg);  /* Opera 10.5 */
-webkit-transform: rotate(45deg);  /* Saf3.1+ */
transform: rotate(45deg);  /* Newer browsers (incl IE9) */

希望能有所帮助。

CSS 2022/1/1 18:23:41 有361人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶