原文地址：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
用法大致如下：
|
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
下面是我對ie-css3.htc的測試。
經過測試，在ie678下：
- 都見到了可喜的圓角
- 陰影顏色不能控制，是默認的黑色
- 可喜可賀。text-shadow 和 word-wrap一切效果正常。但有一點，如果不使用換行，在你寫死元素寬度后，內置文字如果太長會溢出，但在ie6下，元素的寬度會與文字適應。
- 我的博客即將搬運同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3o2gu4wiqq68k