PIE(解决IE9以下圆角等兼容性问题)

一、PIE

PIE能使IE6-9支持CSS3的一些属性，例如圆角，阴影等。它分为pie.htc和pie.js两种用法。

二、pie.htc的使用

在css片段里面加上behavior，例如

.logo{font-size:12px;behavior: url(path/to/pie_files/PIE.htc);}

需要注意的是， behavior 的路径是相对html的，而不是相对所在的css文件。具体的使用可详见PIE使IE支持CSS3圆角盒阴影与渐变渲染

三、pie.js的使用

• 在网页中加入PIE.js脚本。注意，用IE专用的注释，防止非IE浏览器下载。

     <!--[if lt IE 10]> 
      <script type="text/javascript" src="PIE.js"></script> 
     <![endif]--> 
  

• 用js调用

    $('.purchase>a').each(function() {
        $(this).css("position", "relative");//设置position属性，否则无法覆盖
        PIE.attach(this);
    });

  注意点：

• IE下这些CSS3效果实现是借助于VML，由VML绘制圆角或是投影效果的容器元素，然后这个容器元素作为目标元素的后兄弟节点插入，如果目标元素position:absolute 或是 position:relative，则这个css3-container元素将会设置与之一样的z-index值，在DOM tree中，同级的元素总是后面的覆盖前面的，所以这样就实现了覆盖，又避免了可能有其他元素正好插入其中。所以，如果目前元素的position属性为static，也就是默认属性，则z-index属性是没有用的，无覆盖可言，所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单，设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值（不可为-1）。

• 添加阴影时，需设置一个背景色。否则，阴影将会覆盖整个背景。以下代码在IE9及以上浏览器可正常显示。

   .dis_a:hover {
     box-shadow: 0px 5px 30px rgb(204, 204, 204);   
     transform: translate3d(0, -8px, 0);
     -webkit-transform: translate3d(0, -8px, 0);
     cursor: pointer;
     }
  
  

  

  但是在IE9以下浏览器，使用PIE.js制作阴影效果如下。阴影似乎覆盖了整个背景。

  

   但是在以上的CSS代码中添加一个白色的背景色时，`background: rgb(255, 255, 255);`,能正常显示阴影

  

• 实现背景透明度需要在js中额外添加一行代码，同时css中额外添加 -pie-background: rgba(60, 125, 166, .9);才能实现。

  $('.nav_bg').each(function() {
          PIE.attach(this);
          $(this).prev('css3-container').css({
                 'filter': 'alpha(opacity=0.9)',
                 'opacity': 0.9
         });
    });