使用PIE兼容IE8--C3某些属性(border-radius

最近发现一个用的特爽的文件 —— PIE.htc

因为需要圆角显示头像，又要兼容IE8，内心是拒绝的，然后在网上搜了几篇文，说的最多的是用ie-css3.htc和PIE.htc，一开始我是下载了ie-css3.htc，但是它实在是古老，而且支持的C3属性也不多，后老我转战，去看关于PIE的文章。

PIE currently has full or partial support for the following CSS3 features

• border-radius
• box-shadow
• border-image
• linear-gradient as background image
• multiple background images

#myElement {

    background: #EEE;

    padding:2em;

    -moz-border-radius:1em;

    -webkit-border-radius:1em;

    border-radius:1em;

    behavior: url(PIE.htc);

}

无意中我去了PIE的官网css3pie.com，当时我还不知道这官网可以下载真正的PIE.htc，所有我一直停留在PIE作者的Github上github.com/lojjic/PIE，我下载了作者的项目，但是我特么发现并没有出现PIE.htc这个文件！我甚至还问我朋友，当然，他们都不鸟我...我只能靠自己...在这之前我已经下载了一个1.0版本的PIE.htc，但是我嫌弃他古老...而且结合作者的demo配上1.0版本的画面实在是太丑了，我又回到了PIE的官网，突然发现右侧导航栏有“download”，卧槽...我这...我这眼睛醉了...我下载了2.1版本的，打开有PIE.htc！！！非常开心_{然后结合作者的demo，在IE上看非常爽，但是，这文件是有了，但是这途中我也遇到过坑啊}~~

首先1.0版本的，一定要把PIE.htc放到文件夹里在引用，不然没效果

2.0版本的就不用一定要放一个文件夹内，但是它必须要与PIE_IE678.js这个文件放同一个文件夹下，否则也是没有效果的，最重要的一点，差点忘记说...引用必须是以html文件为准的相对路径，不是css

我看作者的Github的评论，里面的人说要跟position:relative， z-index:1 一起使用，但是我不用也有效果...
还有就是作用于:hover的话会有延迟

---

天了噜~~~
今天发现一个问题...behavior: url(PIE.htc)要用在眼看到的元素...怎么说呢，看下面：
需求：我想用一个盒子包住图片，盒子是圆形，设置了overflow:hidden，图片就会显示圆形

html
      <div class="a">
          <div class="c">
              ![](./wubiaoti7.png)
          </div>
      </div>

css
 .a .c  {
        behavior: url(PIE-2.0beta1/PIE.htc);
        border-radius: 50%;
        position: relative;
        z-index: 1;
        overflow: hidden;
        width: 20px;
        height: 20px;
        margin-right: 8px;
    }
    .c img { width: 100%; height: 100%; display: block;}

在IE7的效果是这样的
我看了自己样式很久，再看看之前自己写的demo，终于被我发现哪里不对劲了！
先文字解析，之后再扔demo自己理解
是这样的：我用一个盒子包住图片，然后border-radius:50%，肉眼看以为这个盒子就是个圆了，但是实际上即使加上了behavior: url(PIE-2.0beta1/PIE.htc)但是这个盒子还是个正方形

demo解释：

html
      <div class="anthor">
          <span>
              ![](./wubiaoti7.png)
          </span>
      </div>

css
    .anthor span {
        behavior: url(PIE-2.0beta1/PIE.htc);
        border-radius: 50%;
        position: relative;
        z-index: 1;
        overflow: hidden;
        width: 100px;
        height: 100px;
        background: pink;
        border: 1px solid green;
    }
    .anthor span img {
        width: 50px;
        height: 50px;
        display: inline-block;
        position: absolute;
        top: -20%;
        right: 0;
    }

效果图
为了证明 这个盒子还是个正方形 我给盒子加了边框并且定位，图片top:-20%时向上移，超出部分隐藏，正常来说我们只能看到盒子（圆形），但是却看到图片在一个盒子（正方形）的右上角 top:0 时的效果

所以，behavior: url(PIE-2.0beta1/PIE.htc)要对着想要变圆的元素用，不然没反应...