【css老版本瀏覽器兼容利器】ie-css3.htc

做前端的同學都應該聽說或者用過，是一段腳本，可以讓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/

用法大致如下：

.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-css3.htc);              /* This lets IE know to call the script on all elements which get the 'box' class */
}

ie-css3.htc 加強版

最近用到了這個東西，發現動態改變div的內容之后，這段腳本生成的vml會出現變形。。
所以加了一個手動刷新的函數，通過innerHTML賦值之后調用一下就可以了

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

如果使用jquery就不用這么麻煩，在你的框架里加一段

(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的測試。