CSS的旋转属性在IE

前端之家收集整理的这篇文章主要介绍了CSS的旋转属性在IE前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想旋转DIV到一定程度。在FF它的功能,但在IE我面临一个问题。

例如在下面的样式中我可以设置rotation = 1到4

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

这意味着DIV将旋转到90或180或270或360度。但如果我需要旋转DIV只有20度,那么它不工作了。

我怎么可能解决这个问题在IE?

解决方法

要在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',M22=0.7071067811865476)"; /* IE8 */

你会注意到从上面的IE8有不同的语法到IE6 / 7。如果要支持所有版本的IE,您需要提供两行代码

可怕的数字有在Radians;如果你想使用45度以外的角度(如果你在互联网上有tutorials),你需要为自己制定数字。

还要注意,IE6 / 7语法会导致其他浏览器的问题,因为过滤字符串中的未转义的冒号符号,这意味着它是无效的CSS。在我的测试中,这会导致Firefox忽略过滤器之后的所有CSS代码。这是你需要注意的,因为它可能会导致混乱的时候,如果你被抓住了。我通过在其他浏览器没有加载的单独的样式表中的IE特定的东西解决这个问题。

所有其他当前浏览器(包括IE9和IE10 – yay!)支持CSS3转换风格(尽管通常使用供应商前缀),因此您可以使用以下代码在所有其他浏览器中实现相同的效果

-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) */

希望有帮助。

编辑

由于这个答案仍然是up-vote,我觉得我应该更新它的一个JavaScript库称为CSS Sandpaper,允许你使用(附近)标准CSS代码旋转,即使在旧的IE版本。

一旦你添加CSS砂纸到你的网站,你应该可以写下面的CSS代码为IE6-8:

-sand-transform: rotate(40deg);

比通常需要在IE中使用的传统过滤器样式更容易。

编辑

还要注意一个额外的奇怪,特别是与IE9(和只有IE9),它支持标准变换和旧样式IE -ms过滤器。如果你有两个指定,这可能导致IE9完全混淆和渲染一个坚实的黑盒子的元素本来是。最好的解决方案是通过使用上面提到的砂纸polyfill避免过滤器样式。

猜你在找的CSS相关文章