我想旋转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避免过滤器样式。