More than code
Welcome to the website

让IE6/IE7/IE8浏览器支持CSS3属性

一、下载

首先下载ie-css3.htc文件,这个文件是让IE浏览器支持CSS3一些属性的关键东西。

二、关于此文件

.htc是一个脚本文件,只有Internet Explorer(IE)认识这个文件。在其他浏览器中是不能识别的,htc文件可以用来描述web行为,web行为语序程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX控件)来完成这个功能。本文这个htc文件,就是让IE支持CSS3的一些属性。

三、如何使用

示例代码:

.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这一句,这也是这个方法的优点所在。

四、遇到的一些问题

毕竟不是浏览器自带的属性,使用时遇到问题在所难免,使用此方法存在一定的局限性:

  1. 当前元素一定要有定位属性,像是position::relative或是position:absolute属性。
  2. z-index值一定要比周围元素的要高。

五、支持的样式

border-radius:只设置一个角落的圆角属性无效

border-radius: 不支持除了黑色(#000)以外的其他颜色

text-shadow:IE下的表现与Firefox/Safari/Chrome有一点点的差异

六、结语

这里没有找到更好的完全兼容ie的css3属性解决方案,遇到更好的解决方案,后续更新。

赞(0) 打赏
未经允许不得转载:李帅帅空间 » 让IE6/IE7/IE8浏览器支持CSS3属性

评论 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    厉害了~~~~~

    豫灬木1年前 (2017-05-27)回复
  2. #2

    谢谢!菜鸟一枚

    ice_point1年前 (2017-05-27)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏