• 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/

    用法大致如下:

    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-css3.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

    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
  • 相关阅读:
    linux 常用操作指令(随时更新)
    Spring @Scheduled应用解析
    H5的FormData对象完成ajax上传文件multiFile
    微服务的4个设计原则和19个解决方案
    微服务实战(六):如何做好服务拆分?
    微服务实战(五):微服务化之缓存的设计
    微服务实战(四):微服务化之无状态化与容器化
    微服务实战(三):以MySQL为例,从原理上理解那些所谓的数据库军规
    微服务实战(二):微服务的接入层设计与动静资源隔离
    微服务实战(一):微服务化的基石——持续集成
  • 原文地址:https://www.cnblogs.com/937522zy/p/8310466.html
Copyright © 2020-2023  润新知