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