IE-CSS3.htc让CSS3支持IE6、IE7、IE8——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
IE-CSS3.htc让CSS3支持IE6、IE7、IE8

发布作者:萧强   发布时间:2015-07-17   阅读次数:7066

IE-CSS3简介  IE-CSS3.htc

现在很多低级浏览器(如IE6/7/8)不支持CSS3的很多属性,而ie-css3.htc可以做到让它们也支持,详细介绍请看下面,而IE-CSS3是一种作用于IE浏览器的客户脚本,可以为一些CSS3支持度不好的低版本的IE浏览器(IE6、IE7和IE8)提供支持一些新的CSS3样式和标准。

IE-CSS3的使用方法

工作原理

IE浏览器利用特定的矢量绘图语言的脚本(VML)重建本身不支持的CSS3这些属性(例如阴影和倒角等),说到底这是一种类似JS的脚本。

操作步骤

首选下载ie-css3.htc:在css里面加入如下代码

behavior: url(ie-css3.htc);




 .box {
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
 border-radius: 15px; 
-moz-box-shadow: 10px 10px 20px #000; 
-webkit-box-shadow: 10px 10px 20px #000; 
 box-shadow: 10px 10px 20px #000; 

 behavior: url(ie-css3.htc); //支持  ie6/7/8

 }

支持的样式和设定

支持样式 支持的设定 不支持的设定
border-radius
  • Setting a radius for all four corners
  • Element borders
  • Setting a radius for individual corners separately
box-shadow
  • Blur size
  • Offset
  • Any color other than #000
text-shadow
  • Blur size
  • Offset
  • Color
  • The shadow looks a little bit different than it does in FF/Safari/Chrome, I’m not sure why


常见问题和解决方法

注意,behavior: url(ie-css3.htc);中url是文件的引用地址,你可以用相对或决定路径来引入。


1、层相互重叠。

有两个简单的解决方法:

  1. 设置更大一些的z-index值
  2. 利用绝对定位position:relative 或 position: absolute

2、布局可能有轻微的变形或浮动。

可能有这几个原因:

  1. 可是是你的标签没闭合,至少是包含IE-CSS3元素的标签没闭合
  2. IE6和IE7 bug问题。CSS添加属性 zoom:1 或 position:relative 。或者将margin值用padding值达到同等效果。

3、IE提示脚本错误

常出现在IE6浏览器中,原因是和你添加的别的js冲突了。解决方法:

  1. 调整你的js使之兼容。
  2. 放弃这个方法,采用背景图片或者IE6-IE8不用这个特效(IE9、火狐和谷歌等才用这个特效)


原文出处:CSS3 support for Internet Explorer 6, 7, and 8

本文由w3c梦想站联合整理:w3c梦想站


常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

CSS3直通车

热点文章

新闻资讯

标签云

友情赞助