css怎样解决ie浏览器旋转不兼容

html-css069

css怎样解决ie浏览器旋转不兼容,第1张

在IE下的旋转有两种:

第一种:CSS样式

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

其中rotation属性只有四个值:0,1,2,3

分别表示的旋转度数是:0度,90度,180度,270度。查看参考文档,请点击这里,但是想要旋转其他任意度数上面的方法就不适合了,这就需要下面的方法。

第二种CSS样式

filter:progid:DXImageTransform.Microsoft.Matrix(enabled=bEnabled

,SizingMethod=sMethod ,FilterType=sType ,Dx=fDx ,Dy=fDy ,M11=fM11 ,M12=fM12

,M21=fM21 ,M22=fM22)

enabled:定义滤镜是否被禁止使用,取值范围为布尔值,当取值为true的时候滤镜可用取值为false时,禁止使用滤镜。

SizingMethod:定义元素使用图片时是否改变属性。当取值为clip to original时,元素不改变尺寸当取值为auto

expand时,元素改变尺寸。

FilterType:定义元素旋转的方法。当取值为bilinear时,使用平滑、静态的显示效果nearest

以上是常用的参数,但是平时用的最多的参数有这几个。

嗬嗬,表格嵌套DIV啊~

================================================

这就是浏览器的差别导致的

IE可以识别DW制作的所有样式(本身DW就是针对IE制作的)

而firefox不可以。有些样式他是不识别的,所以针对不同的浏览器,我们定义的时候一般用%的方式来整体布局,像是DIV+渐变的CSS就不要写了,能铺背景就尽量减少K数铺背。

===============================================

话说,我之前也表格+DIV开始的,哈哈~加油啊~!

这个要用css3,ie要用滤镜,举例顺时针旋转90度

-moz-transform:rotate(90deg)

-webkit-transform:rotate(90deg)

transform:rotate(90deg)

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

上面代码前三行是css3,第四行是ie滤镜的简单的90度的整数倍旋转方式,更加复杂的度数要用矩阵,需要的话可以查查资料

注:左旋把90改为-90,rotation=1改为rotation=3.

注:如果你的层上还有文字什么的,也会被旋转,所以有文字的话,和背景图放在不同的层上,旋转有背景图的层