低版本IE运行HTML5+CSS3、Media Query的解决方案

最新推荐文章于 2022-07-12 17:59:58 发布

原创最新推荐文章于 2022-07-12 17:59:58 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#低版本IE兼容 #css hack #ie8

前端学习同时被 2 个专栏收录

17 篇文章

订阅专栏

原生javascript

10 篇文章

订阅专栏

博客介绍了低版本IE的兼容方法。一是条件注释，通过判断IE版本在标签上加class，方便在CSS中进行hack，无需JavaScript且无闪屏。二是Respond.js，可让IE6 - IE8等浏览器支持CSS3 Media Query，引入时需在CSS后，其优点是压缩后仅1k、通用易用，缺点是跨域配置麻烦、有闪屏问题。

条件注释：

<!DOCTYPE html>
<!--[if lt IE 6 ]> <html class="ie6" lang="en"> <!--[endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <!--[endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <!--[endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en"> <!--[endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--[endif]-->

上面的方法是作用于css，来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本，然后在标签上加上该版本的class，这样可以方便hack。

然后我们在css文件中就可以这样写：

.ie6 xxx { };
.ie7 xxx { };
.ie8 xxx { };
.ie9 xxx { };

这个方法不需要或等待JavaScript，而且也不需要重量级的JavaScript库。你定义的styles类立即生效，还没有闪屏。

Respond.js

Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

官方demo地址：http://scottjehl.github.com/Respond/test/test.html

引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）

@media screen and (min-width: 480px){
        

    }

respond.js总结

优点：压缩后仅1k,不跨域时性能ok，只需引入respond.js通用易用
缺点：仅支持media query的min-width和max-width（用于响应式够用）；支持跨域，虽然配置有点麻烦，实现跨域代价高而且有闪屏体验欠佳。

来源：前端开发博客