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/
用法大致如下：
.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的测试。
经过测试，在ie678下：
- 都见到了可喜的圆角
- 阴影颜色不能控制，是默认的黑色
- 可喜可贺。text-shadow 和 word-wrap一切效果正常。但有一点，如果不使用换行，在你写死元素宽度后，内置文字如果太长会溢出，但在ie6下，元素的宽度会与文字适应。
- 我的博客即将搬运同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3o2gu4wiqq68k
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-01-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录