IE6&7下使用CSS3（ie-css3.htc的使用及加強版）

width="728" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" id="aswift_0" name="aswift_0" style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; left: 0px; position: absolute; top: 0px; background: transparent;">
做前端的同學都應該聽說或者用過，是一段腳本，可以讓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的測試。 src="http://jsfiddle.net/aiyuchen/Xd9tr/embedded/result,js,css,html" style="border-width: 0px; margin: 0px; padding: 0px; vertical-align: baseline; width: 1069px; height: 480px; background: transparent;">
經過測試，在ie678下：
都見到了可喜的圓角 陰影顏色不能控制，是默認的黑色  可喜可賀。text-shadow 和 word-wrap一切效果正常。但有一點，如果不使用換行，在你寫死元素寬度後，內置文字如果太長會溢出，但在ie6下，元素的寬度會與文字適應。
最後，有什麼問題，大家可以給我留言哦，別忘了關注我的博客哦：
http://list.qq.com/cgi-bin/qf_invite?id=b6eb34388fd016582957d6e50d005146e24fe6b166ee66c0
您可能也喜歡：

使用CSS3實現頁面變換效果 CSS3鮮花盛開 用純 CSS3 繪制的風扇效果 CSS3學習：線性漸變（linear-gradient） CSS3 繪制的BMW logo