zoukankan      html  css  js  c++  java
  • 让IE6/IE7/IE8浏览器支持CSS3属性

    一、下载

    您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东。

    二、上面的是什么东西

    首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它。htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。Stop! 别叉远了,点到为止,如果您对htc文件感兴趣,可以参见这里

    本文的这个ie-css3.htc文件看看名字,看看长相就知道是干嘛的了,让IE浏览器支持CSS3的一些属性。没错,就是通过脚本为IE浏览器增加一些CSS3标准下的一些行为(比较流行的几种)。此htc第一段主要脚本如下:

    function supportsVml() {
    	if (typeof supportsVml.supported == "undefined") {
    		var a = document.body.appendChild(document.createElement('div'));
    		a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
    		var b = a.firstChild;
    		b.style.behavior = "url(#default#VML)";
    		supportsVml.supported = b ? typeof b.adj == "object": true;
    		a.parentNode.removeChild(a);
    	}
    	return supportsVml.supported
    }
    

    明白人基本上都知道,这不跟js脚本一个模子里出来的嘛。也就是说,htc只是js脚本去韩国整了个容,换了副马甲而已。

    三、如何工作的

    要说工作原理,得有一个新角色粉墨登场,那就是“VML”。VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言,由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的……关于VML详细知识,您可以点击这里:VML百科

    如果要我说的话,我觉得就是IE浏览器的御用画笔,专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了,正好可以就此实现一些IE不支持的CSS3效果。

    IE VML画笔 张鑫旭-鑫空间-鑫生活

    四、如何使用

    使用是很容易的,看下面的示例代码:

    .box {
      -moz-border-radius: 15px; /* Firefox */
      -webkit-border-radius: 15px; /* Safari 和 Chrome */
      border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    
      -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
      -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
      box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    
      behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
    }
    

    可以看到,除了最后添加了behavior这么一句,CSS3属性还是那个CSS3属性,不需要化妆、修饰或是化身为变形金刚,这也是此方法的优点所在。

    五、问题和必要的说明

    毕竟不是浏览器自带的属性,使用时遇到问题在所难免,这里说一下一些注意事项,也可以说是方法的局限性吧:

    1. 当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
    2. z-index值一定要比周围元素的要高,否则……只能说抱歉了~~

    六、支持的样式及状态说明

    参见下表:

    样式生效无效
    border-radius 为元素四个角设置圆角属性
    元素边框
    只设置一个角落的圆角属性
    box-shadow 模糊大小参数
    偏移值
    不支持除了黑色(#000)以外的其他颜色
    text-shadow 模糊大小参数
    偏移值
    颜色值
    IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详

    七、实例与演示

    我自己做了个demo页面,实现的效果是CSS3的圆角以及投影效果,您可以狠狠地点击这里:IE支持CSS3 demo

    以下为IE6浏览器下的效果截图:

    IE支持CSS3属性demo 张鑫旭-鑫空间-鑫生活

    八、结语

    此htc文件是老外写的,所以要是遇到不知名的问题,可以向我询问,但是我不能保证可以给出一个满意的答复。就这些,祝您好运。

    原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
    本文地址:http://www.zhangxinxu.com/wordpress/?p=783

  • 相关阅读:
    【React Native】某个页面禁用物理返回键
    【React Native】DeviceEventEmitter监听通知及带参数传值
    转载【React Native代码】手写验证码倒计时组件
    【React Native】 中设置 APP 名称、应用图标、为安卓添加启动图
    【React Native错误集】* What went wrong: Execution failed for task ':app:installDebug'.
    【React Native错误集】Import fails with "Failed to execute 'ImportScripts' on 'WorkerGlobalScope'"
    【React Native错误集】Android error “Could not get BatchedBridge, make sure your bundle is packaged properly” on start of app
    「React Native笔记」在React的 setState 中操作数组和对象的多种方法(合集)
    【React Native】Error: Attribute application@allowBackup value=(false) from AndroidManifest.xml
    坚果云如何使用二次验证码/谷歌身份验证器/两步验证/虚拟MFA?
  • 原文地址:https://www.cnblogs.com/lewis-g/p/4458766.html
Copyright © 2011-2022 走看看