专栏首页知道一点点css3在IE下兼容

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 条评论
登录 后参与评论

相关文章

  • 实现文字底部居中

    用户3055976
  • bootstrap快速入门笔记(九)-响应式工具

    从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

    用户3055976
  • CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识 1.边框     1.1 圆角  border-radius:5px 0 0 5px;     1.2 阴影  box-shadow:2px...

    用户3055976
  • 百度Apollo自动驾驶源码下载

    阿波罗是百度发布的名为“[Apollo(阿波罗)”的向汽车行业及自动驾驶领域的合作伙伴提供的软件平台。官网

    李小白是一只喵
  • Python之PyChart画图方法

    其实,Python绘图的方式很多,也有很多开源不错的模块可以选择,比如常用于科学计算的Matplotlib、Cairoplot(需要×××)、Chaco、Pyt...

    py3study
  • 使用 Docker 和 Traefik 搭建 Flarum 轻论坛应用

    本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议,欢迎转载、或重新修改使用,但需要注明来源。 署名 4.0 国际 (CC BY 4.0)

    soulteary
  • 这一次搞懂Spring的Bean实例化原理

    前两篇文章分析了Spring XML和注解的解析原理,并将其封装为BeanDefinition对象存放到IOC容器中,而这些只是refresh方法中的其中一个步...

    夜勿语
  • 迁移学习在自然语言处理领域的应用

           迁移学习近年来在图形领域中得到了快速的发展,主要在于某些特定的领域不具备足够的数据,不能让深度模型学习的很好,需要从其它领域训练好的模型迁移过来,...

    CodeInHand
  • 迁移学习在自然语言处理领域的应用

    迁移学习近年来在图形领域中得到了快速的发展,主要在于某些特定的领域不具备足够的数据,不能让深度模型学习的很好,需要从其它领域训练好的模型迁移过来,...

    CodeInHand
  • Spring加载流程源码分析03【refresh】

      前面两篇文章分析了super(parent)和setConfigLocations(configLocations)的源代码,本文来分析下refresh的源...

    用户4919348

扫码关注云+社区

领取腾讯云代金券