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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守望轩

Visual Studio 2008 每日提示(十四)

#131、你为什么会把窗体设置成为浮动(模式) 原文链接:Why you would want to make a Tool Window Floating ...

3537
来自专栏快乐八哥

制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿

    前几日在利用JQuery做菜单滑动标记这个效果的时候,最后发现滑动条在我用鼠标快速滑动的时候,会出现滑动条延迟滑动,并且有卡顿的现象,相当影响体验感受。...

1782
来自专栏无所事事者爱嘲笑

Vue中scoped css和css module比较

3942
来自专栏mukekeheart的iOS之旅

iOS模拟器使用

  在iOS开发过程中一直都是使用模拟器进行调试,在模拟器上有很多不适应的地方,但是其实在模拟器上也有很多其他的功能,在本文中主要对模拟器的一些基本功能进行总结...

1183
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

37511
来自专栏DannyHoo的专栏

iOS中将图片保存到自定义相册中

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

2452
来自专栏vue学习

小程序 — 实现左滑删除效果②

(1)在上一章中,我们给movable-view绑定了一个bindchange事件,事件名为onChange,这个事件是干吗的呢?

2692
来自专栏IT开发技术与工作效率

Excel文件特别大怎么减小

1573
来自专栏h5

支付宝小程序弹窗插件开发|仿微信/android/ios弹窗效果

支付宝小程序弹窗交互组件和微信小程序弹窗功能都差不多,对功能有比较多的限制,尤其想要实现丰富一些的弹窗场景就只能自己写组件实现了。

5551
来自专栏Java开发

WebStorm 代码提示快捷键

1.Ctrl+Shift+a调出面板 2.输入key map过滤出快捷键设计菜单 3.输入basic过滤出提示的快捷键 4.在过滤项上右键添加快捷键

1633

扫码关注云+社区

领取腾讯云代金券