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
用法大致如下:
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的测试。
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