标签：
1.1 CSS3代码：2.23.3 -webkit-border-radius:10px;4.4 -moz-border-radius:10px;5.5 border-radius:10px;6.6 margin: 0px; padding: 0px; border: 0px; outline: 0px; float: none; vertical-align: baseline; position: static; left: auto; top: auto; right: auto; bottom: auto; height: auto; width: auto; font-family: ‘Courier New‘, 宋体; background: none;">666;7.7 width:200px;height:100px;Firefox，Chrome Google，Safari等浏览器的显示效果如图0-0：
图0-0
但是IE这个异类不支持CSS3的这个属性，在IE9下的显示效果如图0-1：
图0-1
但是不能放任它不管，还是找办法解决这个兼容性问题。
解决方案：在CSS文件中通过behavior属性——这个属性只能被IE识别，引入一个htc文件, ie-css3.htc
这个是由Remiz Rahnas使用 VML 编写了一个 HTC 文件，为 IE 浏览器提供圆角效果的支持。
01.1 div{02.2 -webkit-border-radius:10p;03.3 -moz-border-radius:10px;04.4 border-radius:10px;05.5 margin: 0px; padding: 0px; border: 0px; outline: 0px; float: none; vertical-align: baseline; position: static; left: auto; top: auto; right: auto; bottom: auto; height: auto; width: auto; font-family: ‘Courier New‘, 宋体; background: none;">666;06.6 width:200px;07.7 height:100px;08.8 color:#fff;09.9 behavior: url(ie-css3.htc);10.10 }截两幅图看看效果，一幅来自IE6，一幅来自IE9：
注意:首先，在 Server 端需要引入一个 HTC 文件，经过 gzip 压缩后对 server 端和 client 端性能应该不会有太大的影响；其次，它会使你的 CSS 验证不合法；另外，这个脚本在 IE8 上有一些问题，它会使 z-index 值变成负数。因此使用时还需要小心.
01.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">02.2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">03.3 <head>04.4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />05.5 <title></title>06.6 <style type="text/css">07.7 div img{08.8 09.9 -webkit-box-shadow:5px 5px 5px #000;10.10 -moz-box-shadow:5px 5px 5px #000;11.11 box-shadow:5px 5px 5px #000;12.12 width:295px;13.13 height:300px;14.14 /* For IE 8 */15.15 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=‘#000000‘)";16.16 /* For IE 5.5 - 7 */17.17 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=‘#000000‘);18.18 }19.19 </style>20.20 </head>21.21 <body>22.22 <div>23.23 <img src="beautiful.jpg">24.24 </div>25.25 </body>26.26 </html>Chrome,Firefox,IE9下的效果显示:
接下来要做的事情，想必读者朋友都知道了，兼容IE6-8。首先想到的IE的滤镜。来看看效果吧。
01.1 加上滤镜之后的代码片段:02.203.3 div img{04.4 05.5 -webkit-box-shadow:5px 5px 5px #000;06.6 -moz-box-shadow:5px 5px 5px #000;07.7 box-shadow:5px 5px 5px #000;08.8 width:295px;09.9 height:300px;10.10 /* For IE 8 */11.11 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=‘#000000‘)";12.12 /* For IE 5.5 - 7 */13.13 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=8, Direction=135, Color=‘#000000‘);14.14 }测试之后的效果，分别是IE5.5-IE8：
虽然差强人意，但凑合着用。如果有朋友知道除此之外的方法，能否告知一声，共同进步嘛！^_^
01.1 div img{02.2 width:295px;03.3 height:300px;04.4 -webkit-opacity:0.3;05.5 -moz-opacity:0.3;06.6 opacity: 0.3;07.7 /*for IE 6,7,8*/08.8 filter:alpha(opacity=30);09.9 border:1px solid #ccc;10.10 }兼容IE 6,7,8。效果（来自IE6）：
01.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">02.2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">03.3 <head>04.4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />05.5 <title></title>06.6 <style type="text/css">07.7 div {08.8 09.9 width:150px;10.10 height:50px;11.11 margin: 50px;12.12 -webkit-transform:rotate(7deg);13.13 -moz-transform:rotate(7deg);14.14 -ms-transform:rotate(7deg);15.15 -o-transform:rotate(7deg);16.16 transform:rotate(7deg);17.17 border:1px solid #ccc;18.18 }19.19 </style>20.20 </head>21.21 <body>22.22 <div>23.23 24.24 </div>25.25 </body>26.26 </html>让我们来去W3C看看transform的兼容性:
浏览器及其版本的支持，但是IE6,7,8呢？俗话说，兵来将挡，水来土掩，山人自有妙计，只不过这妙计是借来的。
标签：
原文地址：http://www.cnblogs.com/hubl/p/5750552.html
