IE前端CSS处理小结（demo下载）

最新推荐文章于 2025-07-22 17:07:59 发布

原创最新推荐文章于 2025-07-22 17:07:59 发布 · 730 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE兼容性

HTML&CSS 专栏收录该内容

5 篇文章

订阅专栏

本文提供了一套完整的IE浏览器兼容性脚本方案，包括解决媒体查询、修复IE6至IE9的bug、支持HTML5元素、实现CSS3特性等功能。通过这些脚本，开发者可以有效地提升网站在不同版本IE浏览器中的表现。

背景色渐变可以这样写

  background-image: -webkit-linear-gradient(to top, #060607, #292829);
  background-image:linear-gradient(to top, #060607, #292829);
  background: -ms-linear-gradient(#060607 0%,#292829 100%); /** IE9 IE10 **/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292829',endColorstr='#060607',grandientType=1); /** IE7 **/ 
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#292829',endColorstr='#060607',grandientType=1); /** IE8

整理几个IE兼容性设置的脚本

    <!--[if  lt IE 9]>
        <script src="/skin/lib/js/IE9.js"></script>
        <script src="/skin/lib/js/html5shiv.js"></script>
        <script src="/skin/lib/js/respond.min.js"></script>
         <script src="/skin/lib/js/PIE_IE678.js"></script>
         <script src="/skin/lib/js/selectivizr-min.js"></script>
    <![endif]-->

说明一下这几个脚本对应的功能

Respond.js： https://github.com/scottjehl/respond 让旧版本的游览器支持媒体查询，IE你懂的~

IE9.js： https://code.google.com/p/ie7-js/ 修复从IE6到IE9的很多bug和缺损功能（这个我没感觉到实际用处）

CSS3Pie： http://css3pie.com/download/ 可以帮助IE78针对圆角显示的兼容，IE6没测试过。背景色渐变时在IE7下针对body标签的背景渐变无效。另外php环境中使用时引入的是PIE.php，不是PIE.htc。

html5shiv.js： https://code.google.com/p/html5shiv这个作用是让IE8及更低版本的IE识别section、article、nav等HTML5元素。

selectivize： http://www/selectivizr.com :让IE678支持::first-child等高级CSS选择符，感觉蛮好用的

borderBoxModel.js： https://github.com/albertogasparin/borderBoxModel 让IE6和IE7支持box-sizing属性，box-sizing用来做响应式比较有用，可以让该属性的元素不会被padding撑开，保证其原始大小。

PHP写了个小demo，下载地址