让IE6/IE7/IE8浏览器支持CSS3属性

不念不忘少年蓝@ 2021-09-10 17:46 477阅读 0赞

### 一、下载 ###

搜索下载：ie-css3.htc,它是让IE浏览器支持CSS3表现的关键。

### 二、上面的是什么东西 ###

首先说说.htc文件，.htc文件是个脚本文件，个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它。htc文件可以用来描述web行为，web行为允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。

本文的这个ie-css3.htc，让IE浏览器支持CSS3的一些属性。没错，就是通过脚本为IE浏览器增加一些CSS3标准下的一些行为（比较流行的几种）。此htc第一段主要脚本如下：

function supportsVml() {
    	if (typeof supportsVml.supported == "undefined") {
    		var a = document.body.appendChild(document.createElement('div'));
    		a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
    		var b = a.firstChild;
    		b.style.behavior = "url(#default#VML)";
    		supportsVml.supported = b ? typeof b.adj == "object": true;
    		a.parentNode.removeChild(a);
    	}
    	return supportsVml.supported
    }

明白人基本上都知道，这不跟js脚本一个模子里出来的嘛。也就是说，htc只是js脚本去韩国整了个容，换了副马甲而已。

### 三、如何工作的 ###

要说工作原理，得有一个新角色粉墨登场，那就是“VML”。VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的。

如果要我说的话，我觉得就是IE浏览器的御用画笔，专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了，正好可以就此实现一些IE不支持的CSS3效果。

PS:

VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的，在我认为， VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML，其中的文本和图片可以很容易的转换，但如果是手绘制的图形在以往的IE里面就无法解释了，如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面，使IE也具备了绘图功能。

最初由Microsoft开发的XML词表，现在也只有IE5.0以上版本对VML提供支持。

使用VML可以在IE中绘制矢量图形，所以有人认为VML就是在IE中实现了画笔的功能。

### 四、如何使用 ###

使用是很容易的，看下面的示例代码：

.box {
      -moz-border-radius: 15px; /* Firefox */
      -webkit-border-radius: 15px; /* Safari 和 Chrome */
      border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    
      -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
      -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
      box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    
      behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
    }

可以看到，除了最后添加了behavior这么一句，CSS3属性还是那个CSS3属性，不需要化妆、修饰或是化身为变形金刚，这也是此方法的优点所在。

### 五、问题和必要的说明 ###

毕竟不是浏览器自带的属性，使用时遇到问题在所难免，这里说一下一些注意事项，也可以说是方法的局限性吧：

1.  当前元素一定要有定位属性，像是position:relative或是position:absolute属性。
2.  z-index值一定要比周围元素的要高，否则……只能说抱歉了~~

### 六、支持的样式及状态说明 ###

参见下表：

<table style="margin:0px 0px 10px; padding:0px; border-collapse:collapse; width:670px; max-width:100%; color:rgb(62,62,62); font-family:'Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif; font-size:16px; line-height:25.6px; widows:auto; word-wrap:break-word!important"> 
 <tbody style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 
  <tr style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 
   <th style="margin:0px; padding:5px 10px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; text-align:center; background:rgb(240,243,249)"> 样式</th> 
   <th style="margin:0px; padding:5px 10px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; text-align:center; background:rgb(240,243,249)"> 生效</th> 
   <th style="margin:0px; padding:5px 10px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; text-align:center; background:rgb(240,243,249)"> 无效</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> <span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; font-size:16px">border-radius</span></td> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> <span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important">为元素四个角设置圆角属性<br style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 元素边框</span></td> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> <span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important">只设置一个角落的圆角属性</span></td> 
  </tr> 
  <tr style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> box-shadow</td> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> 模糊大小参数<br style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 偏移值</td> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> 不支持除了黑色(#000)以外的其他颜色</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> text-shadow</td> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> 模糊大小参数<br style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 偏移值<br style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important"> 颜色值</td> 
   <td style="margin:0px; padding:2px 4px; word-wrap:break-word!important; word-break:break-all; border:3px solid rgb(255,255,255); max-width:100%; background:rgb(249,249,249)"> IE下的表现与Firefox/Safari/Chrome有一点点的差异，原因不详</td> 
  </tr> 
 </tbody> 
</table>