在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 neighhbor一般用于动态滤镜中。
Dx:定义水平方向上的向量增加量。使用浮点数定义增量的大小，默认值为1.0。
Dy:定义垂直方向上的向量增加量。使用浮点数定义增量的大小，默认值为1.0。
M11：定义元素右侧边线水平方向上的显示位置。使用浮点数定义增量的大小，默认值为1.0。当取值大于1.0时，右边线向右移动，同时拉伸元素的宽度；当取值小于1.0时，右边线向左移动，同时减小元素的宽度。
M12:定义元素底侧边线水平方向上的显示位置。使用浮点数定义增量的大小，默认值为0时。当取值大于0时，底部连线向右移动，同时拉伸元素的宽度；当取值小于0时，底部边线向左移动，同时拉伸元素的宽度。
M21：定义元素右侧边线竖直方向上的显示位置。使用浮点数定义增量的大小，默认值为0。当取值大于0时，底部边线向下移动，同时拉伸元素的高度；当取值小于0时，底部边线向上移动，同时拉伸元素的高度。
M22：定义元素底侧边线竖直方向上的显示位置。使用浮点数定义增量的大小，默认值为1.0。当取值大于1.0时，底部边线向下移，同时拉伸元素的高度；当取值小于1.0时，右边线向上移动，同时减小元素的高度。
以上是此滤镜全部的参数，但是平时用的最多的参数只有5个，所以可以简化为：
CSS样式
filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod=sMethod ,M11=fM11 ,M12=fM12 ,M21=fM21 ,M22=fM22)
SizingMethod一般选择“auto expand”，它和“clip to original”值的区别如下图（图中旋转角度都为45度）：
下面来说下如何计算旋转值，也就是如何计算M11,M12,M21,M22的值。
其实也很简单，用计算器算即可，如果你要做旋转动画，那么需要JS去计算，M11=cos(角度值),M12=-sin(角度
值),M21=sin(角度值),M22=cos(角度值)。例如：你想要旋转10度，那么sin(10)约=0.174,cos(10)
约=0.985,所以四个值相应为：M11=0.985,M12=-0.174,M21=0.174,M22=0.985
在这里也想提下，IE Matrix滤镜还可以实现放大和缩小的效果，类似于zoom样式，只要将M11,M12,M21,M22的值乘以相应的倍数即可。
Ps：在IE6和IE7中如果将滤镜写在<style>标签或者样式表中，会出现以下两个问题，
此滤镜之后的样式都会失效；
旋转滤镜一个页面中只允许有一个。
这两点的解决方案是：将滤镜样式直接内嵌在元素标签上。
如果有更好的解决方法可以留言。想了解更多Matrix滤镜，请猛戳这里和这里
这样配合CSS3样式transform即可兼容所有浏览器实现旋转效果。
有两种方法：
1、在同一个CSS样式表中，使用 !important 来定义不同的值以适应Firefox和IE。
例如：
padding: 20px !important/For Firefox/
padding: 10px/For IE/
（注意这里IE6是无法识别，important 这个标记的，但它会识别padding: 20px，所以要在后面加上padding: 10px用来覆盖padding: 20px）这个方法适用于修改少量代码。
2、条件注释。（只对IE浏览器有效）这也是北极冰仔部落格目前使用的方法。先为不同浏览器书写各自的CSS样式，再在head中加入以下的代码以适应不同的IE浏览器版本调用：
注意：
gt: greater than （高于）
lte: less than or equal to （低于或等于）
另外：IE还支持一个非标准的标签：comment
This is not Internet Explorer.
This is Internet Explorer.
IE会自动把此标签中的内容当作注释处理掉。
扩展资料
关于css兼容性问题及一些常见问题
目前主流浏览器的兼容性做的都比较好了，以下主要针对IE6，7的不兼容问题进行解决。
1、有浮动存在时，计算一定要精确，不要让内容的宽高超出我们所设置的宽高，IE6下，内容会撑开设置好的高度。
解决方法：给对应的父级加overflow:hidden但是会有部分被隐藏掉，最好是精确计算宽高再设定。
2、在IE6下有元素浮动时，如果宽度需要由内容撑开，就给里边的块元素都加浮动，正常浏览器不用加浮动。
3、在IE6下元素的高度的小于19px的时候，会被当做19px来处理。
解决办法：添加overflow:hidden
现代浏览器 | IE浏览器
display: grid| display: -ms-grid //加前缀-ms
grid-template-columns: repeat(12, 1fr) | -ms-grid-columns: (1fr)[12]//重复函数
grid-template-columns: 1fr repeat(3, 20px 1fr)| -ms-grid-columns: 1fr (20px 1fr)[3]
grid-template-columns:100px minmax(200px,500px) 1fr| -ms-grid-columns:100px minmax(200px,500px) 1fr//minmax函数
当值为auto时不起作用。minmax(50px,auto)
单元格占行：现代浏览器
grid-column:1/2
grid-row:1/2
单元格占行：IE浏览器
-ms-grid-column:1
-ms-grid-column-span:1
-ms-grid-row:1
-ms-grid-row-span:1
https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/
