让IE6/IE7/IE8支持CSS3属性的8种方法介绍
互联网 & 09-23 10:43:06 & 作者：佚名 &
IE浏览器暂不支持CSS3的一些属性。国外的工程师们，不安于此现状，他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性，到目前为止，有不少可以让IE支持部分CSS3属性的工具
我们都知道，IE浏览器暂不支持CSS3的一些属性。国外的工程师们，不安于此现状，他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性，我觉得这些都是很有意义，很有价值的工作，可以推动整个技术领域的进步的。到目前为止，有不少可以让IE支持部分CSS3属性的工具。例如： 1. Dean Edwards的IE7.js (以及 IE8.js, IE9.js) 这个玩意估计是试图让IE支持CSS3属性的鼻祖，还算蛮强大，就是性能开销较大，要解析很多文件脚本，给DOM添加大量的元素以及ClassName。 2. Aaron Gustafson的 eCSStender 此方法支持@font-face, CSS3 选择器, 以及 CSS3 Backgrounds 和 Borders。 3. Drew Diller的 DD_roundies 这是一个基于IE VML实现一些CSS3效果的。 4. Remiz Rahnas的border-radius.htc 此方法使用htc文件，配合VML实现，缺点在于不能自动适应目标元素的位置和大小，所以不能适用于动态脚本环境。 5. Nick Fetchak的 ie-css3.htc 关于此方法，我在前面的&让IE6/IE7/IE8浏览器支持CSS3属性&这篇文章中已经做过介绍。我是建议您看看这篇文章，倒不是ie-css3.htc这个玩意多么好，而是文中对htc文件以及VML预言做了些介绍，对于您了解IE下实现类似CSS3效果原理有所了解。 6. Keith Clark的ie-css3.js 这是个与IE7.js类似的项目，其选择器可借助其他JavaScript库，所以其本身较小。 7. zoltandulac的cssSandpaper 这是一个使用IE滤镜实现一些CSS3属性的方法。 8. css3pie的css3 PIE.htc 支持：border-radius圆角 、 box-shadow 盒阴影 、 gradient渐变 、 multiple background images多背景 。 下面对第8第方法的做一下简单介绍： 官方网站：http://css3pie.com/ 使用方法： 第一步：下载css3 PIE.htc 文件 第二步：将PIE.htc文件上传到你的网站目录中，上传到目录哪里都可以，只要你记住这个目录。 第三步：创建html文件，写一段css3代码，并引入PIE.htc，如下面这段： 代码如下: #id { border: 1px solid #999; -webkit-border-radius: 10 -moz-border-radius: 10 border-radius: 10 behavior: url(path/to/PIE.htc); } 注意：.htc 文件路径是相对于html文件的路径，而不是相对于css文件。 已知的一些问题： 此方法并不是万能的，也有一些局限性和需要注意的地方。 1. z-index相关问题 IE下这些CSS3效果实现是借助于VML，由VML绘制圆角或是投影效果的容器元素，然后这个容器元素作为目标元素的后兄弟节点插入，如果目标元素position:absolute 或是 position:relative，则这个css3-container元素将会设置与之一样的z-index值，在DOM tree中，同级的元素总是后面的覆盖前面的，所以这样就实现了覆盖，又避免了可能有其他元素正好插入其中。 所以，问题来了，如果目前元素的position属性为static，也就是默认属性，则z-index属性是没有用的，无覆盖可言，所以此时IE浏览器下CSS3的渲染是不会成功的。要解决也很简单，设置目标元素position:relative或是设置祖先元素position:relative并赋予一个z-index值（不可为-1）。 2. 相当路径的问题 IE浏览器的behavior 属性是相对于HTML文档而言的，与CSS其他的属性不一样，不是相对于CSS文档而言的。这使得使用pie.htc文件不怎么方便。如果绝对路径于根目录，则CSS文件不方便移动；如果相对路径与HTML文档，则pie.htc文件在不同HTML页面见的重用性大大降低。同时，诸如border-image后面的URL属性路径也不好处理。 3. 缩写的问题 使用PIE实现IE下的CSS3渲染（其他方法也是一样），只能使用缩写的形式，例如圆角效果，我们可以设置border-top-left-radius表示左上圆角，但是PIE确实不支持这种写法的，只能是老老实实的缩写。 4. 提供正确的Content-Type 要想让IE浏览器支持htc文件，需要一个有着&text/x-component& 字样的content-type 头部，否则，会忽视behavior。绝大数web服务器提供了正确的content-type，但是还有一部分则有问题。 如果您发现在您的机子上PIE方法无效，也就是htc文件这里指pie.htc文件无效，检查您的服务器配置，可能其需要更新到最新的content-type。例如对于Apache，您可以在.htaccess文件中做如下处理： 代码如下: AddType text/x-component .htc 但是，由于某种原因，您无法修改服务器配置（例如公用主机，或是空间服务商提供的服务器），您可以用一个PHP文件来间接调用htc文件。我只要给你看下这个PHP文件的代码您就知道什么意思了，如下： 代码如下: &?php header( 'Content-type: text/x-component' ); include( 'pie.htc' ); ?& 通过PHP文件来增加一个含有&text/x-component&字样的Content-type头，同时调用pie.htc文件。 关于上面所示的php文件，您可以狠狠地点击这里：pie.php(右键 & [目标|链接另存为])，或者您可以直接新建一个php文件，把上面的两行代码复制进去。或者在本文提供的原始打包资源的wrappers文件夹里面也有此php文件，不过名称是大写的。 如果您使用上述php文件，您需要将pie.php和pie.htc放在同一个文件夹目录下，同时CSS中的behavior写法应该是： 代码如下: behavior: url(pie.php); 以上为一些常见的主要的问题，当然，在复杂的页面情况下，还会有其他意想不到的情况，这里，祝您好运了！
大家感兴趣的内容
12345678910
最近更新的内容主流浏览器内核及CSS3中一些私有属性的css前缀
现代浏览器的内核，主流内容主要有（熟悉的有Firefox，Flock等浏览器）、（熟悉的有Safari、Chrome等浏览器）、（Opera浏览器）、Trident（讨厌的IE浏览器）。
根据不同的内核，一些私有属性的css前缀不一样&
Mozilla内核　　 css前缀-
WebKit内核　　css前缀-&&
Opera 内核 　　css前缀 -
Trident内核　　css前缀 -ms
&&&&&&&&&&&&&&&&&&&&&&&&&&&
css前缀 -khtml：苹果浏览器之前的版本，后改为WebKit内核
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。　　转眼又已过去了一年，在这一年里，Firefox 和 Chrome 在拼升级，版本号不断飙升；IE10 随着 Windows 8 在去年10月底正式发布，在 JavaScript 性能和对 HTML5 和 CSS3 的支持方面让人眼前一亮。这篇文章给大家带来《五大主流浏览器&&和&&兼容性大比拼》，让我们一起来看看2013年的浏览器现状。
　　浏览器厂商之间的竞争促使各大浏览器对&&和&&的支持越来越完善，下面的图表列出了 IE，Chrome，Firefox， Safari，Opera 五大主流浏览器，在 Mac 和 Windows 两个平台，对 HTML5 和 CSS3 各种特性最新的支持情况的详细清单（个别数据可能不准确，大家可以通过&&查询更为详细的信息）。
　　从表中可以看出，除了 Overflow Scrolling 还没有浏览器支持之外，其它属性都已经有浏览器实现了。在 Windows 平台，Chrome 支持除 Overflow Scrolling 以外的所有属性（图片数据有误，CSS3 3D Transforms 在 Chrome 25 开始已支持，需要加 -webkit- 前缀），其次支持比较好的是 Firefox，还不支持 CSS3 Reflections。
　　曾经一片红叉的 IE 开始迎头赶上，IE10 已经和能和 Opera 比拼了。在 Mac 平台情况要好很多，Safari 、Chrome 和&Firefox 几乎支持全部的&&特性。Opera 也只有少数几个属性不支持。
　　（注：CSS3 的&Overflow Scrolling 属性用于模拟移动设备原生的阻尼滚动，类似于&&实现的滚动效果，目前只有 iOS 5 内置的 Sarari 浏览器支持，详情：）
CSS3 选择器
　　&选择器兼容情况最让人欣慰，除了 IE9 以下的版本，其它浏览器已全部支持&&选择器特性。IE6 悲剧的一个都不支持，IE7 和 IE8 仅支持少部分，IE9 和 IE10 给力，竟然也全部支持。
HTML5 Web 应用程序
　　HTML5 为支持 Web 应用程序开发新增的这些特性是&&最激动人心的部分，包括本地存储、离线存储、地理定位、Workers 和 WebSockets 等等。Chrome 最给力，支持全部特性（表中数据有误，Touch（触控）事件，Chrome 25 和 Firefox 19 已支持）。
　　WebSQL Database 已经被 W3C 放弃了，浏览器不支持也没关系，而 Indexd Database，IE10、Chrome 和 Firefox 都支持，这是开发者的福音啊。IE10 很给力，就 Meter 标签和 Touch Event 不支持。
HTML5 图形和内嵌内容
　　这应该是&&最令人期待的东西了，内置Canvas，Audio，Video，SVG、WebGL 和 SMIL 等重要特性对象。Chrome、Firefox、Safari、Opera 以及 IE9/IE10 都支持，太棒了！
HTML5 音频编码
　　Chrome 依然给力，对&&音频格式又是全部支持，Safari 除 Ogg Vorbis 格式外全部支持。让人感到奇怪的是 IE 竟然不支持自家的 WAV 格式，而 Chrome、Firefox、Opera 和 Sarari 却都支持，⊙﹏⊙b汗。
HTML5 视频编码
　　对&&视频的支持还是 Chrome 最好，包容天下。Firefox 和 Opera 支持 Ogg Vorbis 和 WebM 两种视频格式，不支持 H.264，相反的 IE9/IE10 和 Safari 只支持 H.264。据统计，目前&80%的视频使用 H.264 编码，期待 H.264 早日统一的视频编码标准！
HTML5 表单输入
　　&新增了众多新的 input 类型，例如 DateTime、Range、Colour 等等，以前这些都是需要使用 JavaScript 才能实现的功能，如今只需要设置 input 类型就能实现。淡定的 Opera 竟然全部支持，有点意外！Chrome 还不支持 DateTime 类型，其它的都支持，IE10 和 Safari 都支持程度相当，而 Firefox 这方面还需努力。
HTML5 表单属性
　　&表单属性也是对表单功能的重要改进，简化了 Web 应用开发。在 Mac 平台，除了 Safari 还不支持 List 属性外，其它属性都支持。在 Windows 平台，Chrome、Opera 和 IE10 全部支持，Firefox 又掉队了，竟然落后 IE 了，Min、Max 和 Step 属性都还不支持。
　　目前，对&&和&&支持最好的是 Chrome，IE10 已经能和 Safari、Firefox、Opera 旗鼓相当了。总的来说，各大浏览器对 HTML5 和 CSS3 的支持正在不断完善，越来越多的各大企业和开发者也在尝试在项目中使用&&和&，特别是在移动互联网领域，已经有很多优秀的应用开发出来，未来的 Web 有很多令人期待的东西。
（文/，数据来源：）
您可能感兴趣的相关文章
本文链接：
编译来源：
阅读(...) 评论()Android平台浏览器CSS3兼容性测试【来自自留地】
Android是一个很火爆的智能手机操作系统，目前使用Android的用户数量比使用IOS的用户要多出一倍。
& && &正如我昨天发布的日志《浅谈我对移动互联网的一些见解》里说到，移动互联网的格局已经发生了翻天覆地的变化，相对于专门为移动设备而开发的移动网站来说，也步入了一个崭新的时代，那就是HTML5与CSS3在移动设备上的应用。
& && && && && && && && && && && && && && && && && && && && && && && && && && && && && &
但是也正如桌面上的浏览器一样，手机上也有着各门各派的浏览器。究竟现在的对HTML5与CSS3的支持程度如何，我在自用的小JJ上做了个测试，主要测试一下几个浏览器对一些常用的CSS3基础属性的兼容性。而这里有一份移动浏览器HTML5兼容性列表，可以很明确看出当前的主流手机浏览器对HTML5的兼容性如何。
& && &我手头上只有一部Android系统的和一部Windows mobile系统的手机，所以...Windows mobile可以免了，当年智能机市场的霸主，现在却日暮西山了。
& && &测试平台：Android 2.2.2
& && &测试浏览器：Android自带浏览器
& && && && && && && && && &opera mobile 11.10
& && && && && && && && && &手机QQ浏览器 2.6Build0160
& && && && && && && && && &UC浏览器 V8.0.3.99
& && && && && && && && && &百度手机浏览器 beta2 1.0.3.35
& && && && && && && && && &海豚浏览器 HD 6.3.1
& && &本来还计划测试UC WEB和Opera mobi两个浏览器的，不过后来想到这两个浏览器都是以压缩网页出名的，网页经过高度压缩后哪里还容得下CSS3的存在，所以就没有用着两个浏览器做测试。不过UC WEB7.9及以下版本可以设置浏览模式为缩放模式，这样就能得到自带浏览器的浏览体验。
& && &测试网页：，昨晚写的一个简单的CSS3基础属性测试页面，大家可以拿起手机甚至桌面浏览器进去测试一下，看能否支持这些基础的CSS3属性。
& && &我把各个浏览器测试完毕并截图后，再一个个的剪切出来然后贴在一起比较，图做得比较简陋，不过很直观。
& && &第一轮：测试text-shadow属性
& && &text-shadow可以支持给文字加上阴影,这样我们在设计时可以利用css3属性增加文字的质感而不用使用任何图片。
& && && && && && && && && && && && && && && && && && && && && && &
可以看到除了QQ浏览器外，其他浏览器都支持能支持text-shadow属性，但是更明显可以看出Opera mobile的显示效果完胜其他浏览器，因为我在CSS里定义了字体的粗细为800，其他浏览器都不能显示。
& && &第二轮：测试radius属性
& && &radius，就是半径的意思。用这个属性可以很容易做出圆角效果，当然，也可以做出圆形效果。这里我就画了一个边框为2px的圆形，来看看它们都支持得怎么样。
& && && && && && && && && && && && && && && && && && && && && && && &
很明显可以看出，除了QQ浏览器外，其他浏览器都完美支持radius属性。以后设计网页，不要老是方方正正的了，适当的使用一下圆角，会使页面更美观。
第三轮：测试box-shadow属性
& && &box-shadow属性可以让我们轻松实现图层和盒子边框阴影效果。可以说这个属性是最普遍的，使用最广泛的属性了，我们来看看哪个浏览器能支持这个属性。
& && && && && && && && && && && && && && && && && && && && && && && &&&
还是除了QQ浏览器，其他浏览器都能完美的支持box-shadow属性，但是OPERA MOBILE的阴影颜色很重，跟上面的text-shadow一样。
& &&& 第四轮：测试是否支持rotate
& && &rotate是一个很好玩的属性，它能使你赋予这个属性的图片，文字和盒子往特定的角度倾斜甚至旋转。
& && && && && && && && && && && && && && && && && && && && && && && && &
老规矩，这个坑爹的QQ浏览器不支持，完全不意外。
& && &第五轮：进阶--测试是否支持线性渐变与径向渐变
& && &线性渐变是指沿着一根轴线（水平或垂直）改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边）。而径向渐变是指从起点到终点颜色从内到外进行圆形渐变（从中间向外拉）。
& && && && && && && && && && && && && && && && && && && && && && && &&&
可以看到，除了QQ浏览器啥都不支持以外，其他浏览器都支持线性渐变，但是opera mobile却不支持径向渐变，而后面四个浏览器对径向渐变的支持感觉也不是那么好，跟桌面端的Chrome看来差别很大。
& && &好了，测试到此结束，除了QQ浏览器以外，各浏览器都有不错的表现，谁能告诉我手机QQ浏览器除了偷菜以外还能做些什么？不过，现在还有人玩偷菜吗....
& && &可能你会发现，上面测试的图里，后四个浏览器的表现基本都是一致的，下面一张图可以解释一切
上图的测试里我画了一个80X80px的盒子，没有边框，只有box-shadow属性，并使用了一个私有属性-webkit-，很明显，这个测试是用来测试浏览器是否webkit内核的，UC8，百度，海豚都跟自带浏览器一样使用了webkit内核。所以它们对CSS3的兼容性都差不多的。
& && &再上一张图，测试页面里我把所以盒子都画成80X80px的，但是这个QQ浏览器......
谁能告诉我这坨shit还能有什么存在的价值.......
& && &总结：webkit内核是大势所催，webkit将会统治地球。不止android是使用webkit内核的浏览器，IOS的safali也是webkit内核的。所以，你可以把网页设计的更加漂亮，基本上不用考虑浏览器是否支持得好。
& && &附件是我测试浏览器时的所有截图，上面的测试结果并不是我“老作”的。
上UC，有快感！
该帖共收到 12 条回复！
发表于 日 20:26
op和uc等才是真正的浏览器，qq浏览器，滚到南极去，别丢人了
以下为原网页截图
上UC，有快感！
发表于 日 20:30
上UC，有快感！
发表于 日 21:21
记得测试html5的那个网页qq分数很高啊 求解了
上UC，有快感！
发表于 日 22:28
表示java的Opera mini最强
支持text-shadow属性
上UC，有快感！
发表于 日 22:33
原帖由 东方无痕 于 日 22:28 发表
支持text-shadow属性
0pmobile挺强，mini，还是算了吧，啥都被它压缩没了
上UC，有快感！
发表于 日 22:37
唉！S40只能用mini啊！
原帖由 震邪委员 于 日 22:33 发表
0pmobile挺强，mini，还是算了吧，啥都被它压缩没了
唉！S40只能用mini啊！
上UC，有快感！
发表于 日 17:26
安卓自带浏览器都正常，而qq和uc7.9，欧朋浏览器都不正常。说明不是wekit内核而已。而其他的浏览器像uc8，百度，海豚，傲游，360，天天，go，迷人都是借用系统自带浏览器内核而已
[ 本帖最后由 wangjian393 于 日 17:27 编辑 ]
上UC，有快感！
发表于 日 18:42
提示: 作者被禁止或删除 内容自动屏蔽
上UC，有快感！
发表于 日 20:33
此文说明QQ不是套了自带的壳...
上UC，有快感！
发表于 日 20:48
原帖由 无名小嘶 于 日 20:33 发表
此文说明QQ不是套了自带的壳...
套得不够好而已
上UC，有快感！
发表于 日 20:54
原帖由 wangjian393 于 日 17:26 发表
安卓自带浏览器都正常，而qq和uc7.9，欧朋浏览器都不正常。说明不是wekit内核而已。而其他的浏览器像uc8，百度，海豚，傲游，360，天天，go，迷人都是借用系统自带浏览器内核而已
uc8 哪里套壳了.....合着能css3的难道都加壳??!! 那些不支持的是因为服务器压缩得太凶了,好处是省流量.
上UC，有快感！
发表于 日 21:35
反正QQ就是一坨屎
上UC，有快感！CSS3兼容各浏览器的渐变代码 包括水平和垂直渐变-DIVCSS8
CSS3兼容各浏览器的渐变代码 包括水平和垂直渐变
作者：CSS3教程 && &
点击次数：427次&& & 发布日期：
CSS3兼容各浏览器的渐变代码 包括水平和垂直渐变
&CSS兼容各浏览器的渐变代码，包括水平和垂直渐变，兼容火狐、chrome、Opera等浏览器的代码也有，从此可以不用图片了，极大的方便了CSS爱好者。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &&&
&html&xmlns=&&&
&title&CSS线性渐变-divcss8.com&/title&
&style&type=&text/css&&
width: 200
height: 80
text-align:
line-height: 80
margin-bottom: 10
font-size: 20
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
background: -moz-linear-gradient(top, #FF0000, #F9F900);
background: -o-linear-gradient(top,#FF0000, #F9F900);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
width: 200
height: 80
text-align:
line-height: 80
margin-bottom: 10
font-size: 20
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='1');
background: -moz-linear-gradient(left, #FF0000, #F9F900);
background: -o-linear-gradient(left,#FF0000, #F9F900);
background: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#FF0000), to(#F9F900));
&div&class=&test1&&CSS垂直渐变&/div&
&div&class=&test2&&CSS水平渐变&/div&
同时也会大家收集了一些在其它浏览器下的CSS渐变代码，供需要者使用。先来看IE下的CSS渐变代码：
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0');
参数：startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直，为1时代表水平。
Firefox下的CSS渐变代码：这个更简单：
background: -moz-linear-gradient(top,&#FF0000,&#F9F900);
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变。
Opera浏览器中的CSS渐变，代码同样挺简洁：
background: -o-linear-gradient(top,#FF0000,&#F9F900);
参数：top、bottom垂直，left、right水平 例如：top时从顶部由#FF0000到#F9F900渐变，bottom时从底部由#FF0000到#F9F900渐变。
webkit内核的浏览器CSS渐变代码，如Chrome、Safari等：
background: -webkit-gradient(linear,&0%&0%,&0%&100%, from(#FF0000), to(#F9F900));
参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色。
好了，这么多的渐变代码，自己亲自尝试下吧，你可以试着改变他们的颜色，变成你自己喜欢的渐变风格。
分享DIVCSS8}