css3在IE下兼容

原文地址：http://blog.csdn.net/bingqingsuimeng/article/details/44201433

作前端的同窗都应该据说或者用过，是一段脚本，可让ie实现css3里的圆角和阴影效果。

css带来的便利是很容易感觉的到的，但恶心的是它在ie下的不兼容，因此某位牛人现身写了个ie-css3.htc，容许你在ie下去使用css3的部分东西。

ie-css3的使用方法很简单，在你须要使用css3的样式里加入behavior: url(js/ie-css3.htc);就能够了（括号里是ie-css3.htc的地址）

ie-css3.htc

http://fetchak.com/ie-css3/

用法大体以下：

1 2 3 4 5 6 7 8 9 10 11

.box {      -moz-border-radius:  15px ;                 /* Firefox */      -webkit-border-radius:  15px ;              /* Safari and Chrome */      border-radius:  15px ;                      /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */        -moz-box-shadow:  10px 10px 20px #000 ;     /* Firefox */      -webkit-box-shadow:  10px 10px 20px #000 ;  /* Safari and Chrome */      box-shadow:  10px 10px 20px #000 ;          /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */        behavior:  url (ie-css 3 .htc);               /* This lets IE know to call the script on all elements which get the 'box' class */ }

ie-css3.htc 增强版

最近用到了这个东西，发现动态改变div的内容以后，这段脚本生成的vml会出现变形。。
因此加了一个手动刷新的函数，经过innerHTML赋值以后调用一下就能够了

1 2	el.innerHTML =  '....' ; if (window.update_css3_fix) update_css3_fix(el);

若是使用jquery就不用这么麻烦，在你的框架里加一段

1 2 3 4 5 6 7 8 9 10 11 12 13 14

( function () {      if (!jQuery.browser.msie)  return ;      jQuery.fn.__ohtml__ = jQuery.fn.html;      jQuery.fn.html =  function (value)      {          jQuery( this ).__ohtml__(value);          this .each( function ()          {              update_css3_fix( this );          });          return this ;      }; })();

另外官网下载的脚本还会产生yourdomain/none的404请求，也已经修复

下载加强版ie-css3.htc

http://files.cnblogs.com/aiyuchen/ie-css3.htc.zip

下面是我对ie-css3.htc的测试。

通过测试，在ie678下：

• 都见到了可喜的圆角
• 阴影颜色不能控制，是默认的黑色
•  可喜可贺。text-shadow 和 word-wrap一切效果正常。但有一点，若是不使用换行，在你写死元素宽度后，内置文字若是太长会溢出，但在ie6下，元素的宽度会与文字适应。
• 个人博客即将搬运同步至腾讯云+社区，邀请你们一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3o2gu4wiqq68k