CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了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的旋转属性在IE全部内容,希望文章能够帮你解决CSS的旋转属性在IE所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。