如何让早期版本的IE兼容CSS3的一些功能

作者:课课家教育更新于： 2016-09-30 14:14:13

       在发布了多篇css3教程以后，小编收到不少好评的同时也听到了一些抱怨的声音。毕竟现在在国内，Windows XP还没有被完全淘汰，而XP系统内置的IE只能升级到8版本，所以无法观看CSS3效果。

　　我们不可能让用户弃用IE，更不能强制要求用户升级系统，所以我们需要找到兼容早期版本IE的一些方法。

　　1.为元素设置透明度

　　透明度其实早在IE6时代就有滤镜可以支持了，但由于其他浏览器不愿意与IE为友，不兼容它的滤镜，所以这功能老早前就被忽略了，而且也没被w3c标准收录。

　　不过现在我们刚好可以用它来兼容回IE浏览器了。

　　.alpha {

　　background-color:#0f0;

　　opacity:0.4;

　　filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

　　}

　　第二行为非IE浏览器所能识别的透明度属性，而第三行则专为早期IE而设。

　　2.利用微软的VML功能实现圆角，阴影等属性

　　VML（Vector Markup Language，矢量标记语言）也是微软的原创，出来以后也是骂声一片，最后的下场也是IE一家孤芳自赏，也没被w3c收录。最终败给的是更受其他浏览器欢迎的SVG（Scalable Vector Graphics，可缩放矢量图形）和大家熟悉的CSS3。

　　言归正传，用VML编写这些效果是相当麻烦的，所以有人为此特地编写了一个实现兼容功能的文件ie-css3.htc，您可以通过搜索引擎找到这个文件。使用的方法，在这些CSS3属性所在的样式中新增一行behavior属性。

　　.rounded-shadow{

　　-moz-border-radius:15px;

　　-webkit-border-radius:15px;

　　border-radius:15px;

　　-moz-box-shadow:5px 5px 5px #000;

　　-webkit-box-shadow:5px 5px 5px #000;

　　box-shadow:5px 5px 5px #000;

　　behavior:url(ie-css3.htc);

　　}

　　此外，用IE提供的shadow滤镜也可以制作阴影，

　　filter:progid:DXImageTransform.Microsoft.Shadow(Color=’#000000’,Direction=135,Strength=10);

　　而DroPShadow滤镜则可用于模拟圆角，主要原因是这种阴影不带颜色渐变。

　　filter:progId:DXImageTransform.Microsoft.DropShadow(Color=’#009900’,OffX=’5’,OffY=’5’);

　　不过两个一起应用的话可能会有冲突，此时滤镜效果会转移到其子元素上。

　　3.用渐变滤镜在IE中实现渐变效果

　　无独有偶，这也同样是微软的“专利”。

　　.gradient{

　　background-image:-moz-linear-gradient(top,#444444,#999999);

　　background-image:-webkit-linear-gradient(left top,left bottom,color-stop(0,#444444),color-stop(1,#999999));

　　filter:progid:DXImageTransform.Microsoft.gradient(StartColorStr=’#444444’,EndColorStr=’#999999’);

　　}

　　4.利用32位RGBA颜色实现透明颜色背景

　　RGBA是在RGB模式（如#FF0000）的基础上新增两个16进制位所得到的一种带透明度的颜色，其格式为#80FF0000，最前面的两位取值跟RGB类似，都在#00到#FF之间。

　　颜色格式已被广泛应用到SVG，CSS3等主流领域，但是滤镜还一样，只有IE自己能认。

　　.gradient-alpha{

　　background-color:rgba(255,0,0,0.5);

　　filter:DXImageTransform.Microsoft.gradient(StartColorStr=’#80FF0000’,EndColorStr=’#CC0000FF’);

　　}

　　5.多重背景图片功能的实现

　　在CSS3里，这是非常容易实现的事情，多个背景用逗号隔开就可以了，但是不能兼容早期版本的IE。不过也有兼容的方法，以下样式的后两行就用于兼容IE，你会发现，IE的这些定义真的又长又臭，还要设置一下transparent才可以让这种功能生效。

　　.multiple-background{

　　background:url(bg-image-1.gif) center center no-repeat,url(bg-image-2.gif) top left;

　　background:transparent url(bg-image-1.gif) top left repeat;

　　filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’bg-image-2.gif’,sizingMethod=’crop’);

　　}

　　6.用BasicImage或者矩阵实现元素的旋转

　　IE的滤镜支持旋转，但是要么功能不够强大，要么参数复杂，尤其是矩阵，要灵活运用它还需要熟悉矩阵数学的知识，不过，为了兼容这个万恶的IE，我们不得不硬着头皮给写写了。

　　.rotation{

　　-moz-transform:rotate(180deg);

　　-o-transform:rotate(180deg);

　　webkit-transform:rotate(180deg);

　　transform:rotate(180deg);

　　filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

　　filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod=’autoexpand’,M11=-1,M12=0,M21=0,M22=-1);

　　}

　　最后补充一点，这些滤镜可以在同一样式中使用多个，效果可以叠加。

　　虽然IE8及更早版本一直为国人所诟病，但它的顽固存在也必然有它的道理。其实跟IT业较为发达的国家相比，中国的技术已经比它们落后了好几年。这不禁让小编想起小学的一篇课文——《为中华之崛起而读书》。然而在这个浮躁的社会，还有多少人能有这样的觉悟呢？

　　所以我们应该倍感幸运，虽然使用旧式滤镜模仿CSS3的效果难称完美，但在一些情况下，它们能够让我们的代码更为简洁和统一。然后，就让我们一起努力，让中国在IT领域真正强大起来吧！