有关IE兼容性问题1

不知不觉来公司差不多快2个月了，期间遇到了各种问题，让我不知所措的就是兼容性问题，同时也让我极其讨厌IE，但没办法，以下是我所遇到的兼容IE的解决方法，如有雷同，纯属巧合......................

问题一：有关圆角：border-radius,阴影：box-shadow，渐变：background：linear-gradient 等IE8-是不兼容的
解决：
第一步：下载css3 PIE.htc 文件; {官方网站：http://css3pie.com/}

    第二步：将PIE.htc文件上传到你的网站目录中，上传到目录哪里都可以，只要你记住这个目录。
第三步：创建html文件，写一段css3代码，并引入PIE.htc，例如：
#container{
border: 1px solid #ddd;

border-radius: 5px;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

behavior: url(path/to/PIE.htc); } 

注意：.htc 文件路径是相对于html文件的路径，而不是相对于css文件。

问题2：有关opacity透明度兼容问题

opacity:用于设置元素的透明度。取值范围在0-1之间，不可取负值，这个属性是CSS3才有的，只有IE9+才支持，如果要兼容IE8，则可以了解一下另外一个filter滤镜属性；

CSS：

        background: rgba(255,255,255,0.1); //一般的高级浏览器都支持

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);//IE8下

说明：
这个颜色“#19ffffff”是由两部分组成的。

第一部是#号后面的19 。是rgba透明度0.1的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如运行截图所示。

 
第二部分是19后面的六位 。这个是六进制的颜色值。要跟rgb函数中的取值相同。比如rgb(255,255,255)对应#ffffff；就是白色。

rgba值对应filter值

rgba透明度值	IEfilter值
0.1	19
0.2	33
0.3	4C
0.4	66
0.5	7F
0.6	99
0.7	B2
0.8	C8
0.9	E5

filter:滤镜(可参考w3c)

用法：filter: none | blur()| brightness()| contrast()| drop-shadow()| grayscale()| hue-rotate()| invert()| opacity()| saturate()| sepia()| url();

提示: 使用空格分隔多个滤镜。

Filter 函数
注意: 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

Filter
描述
none 默认值，没有效果。
blur(px)
给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；

问题3：CSS3中的transform兼容问题

由于现代浏览器中CSS3的transform属性可以轻松实现元素的旋转以及比例改变，IE浏览器下Matrix矩阵滤镜可以实现旋转效果

transform 属性

定义：
向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
浏览器支持：
IE10、Firefox、Opera 支持 transform 属性。
IE9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。

CSS Matrix矩阵滤镜

定义：
CSS的Matrix滤镜使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。
兼容性
兼容 IE5.5+。

基本语法如下：
filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod= sMethod , FilterType= sType , Dx= fDx , Dy= fDy , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )

属性

1. enabled：布尔值(Boolean)。设置或检索滤镜是否激活。
true：默认值。激活滤镜。
false：禁止滤镜。

2. SizingMethod：字符串(String)。设置或检索容器是否改变尺寸去适应目标图像。
clip to original：默认值。容器不改变尺寸。
auto expand：容器改变尺寸以适应目标图像。

3. FilterType：字符串(String)。设置或检索定义新内容的像素的方法。
要想获得最好的平滑的静态滤镜效果，请使用 bilinear 方法参数。而当用于动画图像时，nearest neighbor 方法参数因其运算速度较快从而能够提供动画每秒更多图像。
bilinear：默认值。使用 bilinear 方法定义目标像素的色彩内容。
nearest neighbor：使用 nearest neighbor 方法定义目标像素的色彩内容。

4. Dx：浮点数(Float)。设置或检索线性转换的向量增加 X。默认值为 1.0。当 SizingMethod 属性设置为 auto expand 时此属性设置被忽略。

5. Dy：浮点数(Float)。设置或检索线性转换的向量增加 Y。默认值为 1.0。当 SizingMethod 属性设置为 auto expand 时此属性设置被忽略。

6. M11：浮点数(Float)。设置或检索线性转换的第一行/第一列矩阵输入。默认值为 1.0。

7. M12：浮点数(Float)。设置或检索线性转换的第一行/第二列矩阵输入。默认值为 0.0。

8. M21：浮点数(Float)。设置或检索线性转换的第二行/第一列矩阵输入。默认值为 0.0。

9. M22：浮点数(Float)。设置或检索线性转换的第二行/第二列矩阵输入。默认值为 1.0。

说明:

1. 使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。

2. 使用此滤镜可以建立下列效果：
左右反转。将 M11 和 M12 的值取负。
上下反转。将 M21 和 M22 的值取负。
改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。

3. Matrix滤镜实现的是任意角度的旋转以及缩放。

简化：
filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');
1. M11, M12, M21, M22，这几个参数就是2×2矩阵中的的四个数值。

2. 只要把你需要旋转的角度用上面的roation值代替并计算出来就可以了。例如把一个元素旋转125度就是：
M11=cos(roation)=cos(125)=-0.573
M12=-sin(roation)=-sin(125)=-0.819
M21=sin(roation)=sin(125)=0.819
M22=cos(roation)=cos(125)=-0.573：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.573,M12=-0.819,M21=0.819,M22=-0.573,SizingMethod='auto expand');}

但是，同时你希望元素放大或者缩小两倍，只需将M11, M12, M21, M22同时乘以2或者除以2就可以了，也就是：

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1.146,M12=-1.638,M21=1.638,M22=-1.146,SizingMethod='auto expand');}