解决跨浏览器问题

1、渐进增强与优雅降级

      优雅降级：优雅降级指的是为现代浏览器制作网站，然后保证为某些老版本浏览器提供基本可用的 体验。新特性在老版本浏览器中会降级，且一般会有一个分界点，声明不支持那些老掉 牙的浏览器。有些时候用户也仅会被警告他们所使用的浏览器有问题，建议其更换

      渐进增强：渐进增强与优雅降级恰好相反。渐进增强以恪守Web 标准的标签为基础，意味着它在所 有浏览器中均可用。然后通过CSS 样式和必要的JavaScript 来为更先进的浏览器提供渐进式的增强体验。

      

2、前端的瑞士军刀：Modernizr

     Modernizr是一个用于检测浏览器功能的开源JavaScript库

     Modernizr默认做的事：

          （1）给不支持HTML5 标签的浏览器如IE6、7、8 追加一点由Remy Sharp 开发的HTML5 垫片脚本，使其可以 识别<aside>、<section>等 HTML5 元素

          （2）主要做的就是浏览器“功能检测“

       使用Modernizr：

          第一步，下载Modernizr（http://www.modernizr.com）。

          第二步：导入js文件：

                      <script src="../js/modernizr.js"></script>

      使用Modernizr辅助修正样式问题

      使用Modernizr让老版本IE支持HTML5 元素

      给IE6、7、8 追加min/max媒体查询功能：需要加载以下脚本<script src="js/respond.min.js"></script>

      使用Modernizr按需加载资源：

            Modernizr 中包含一个名为YepNope.js 的小型JavaScript 库文件（http://yepnopejs.com/）。 

            使用方法很简单：

Modernizr.load({

    test: Modernizr.mq('only all'),    //此处的only all 表示“你能识别媒体查询吗？”

    nope: 'js/respond.min.js'            //当前浏览器不支持媒体查询，则会加载respond.min.js 这个文件

});

           还可以一次加载多个文件：

Modernizr.load({

    test: Modernizr.mq('only all'),

    nope: ['js/respond.min.js', 'css/extra.css']

});

         还可以根据不同的检测结果来加载不同的资源文件：

Modernizr.load({

test: Modernizr.mq('only all'),

yep: 'js/pass.js', //检测通过时加载一个文件

nope: ['js/respond.min.js', 'fail-polyfill.js', 'fail.css'] , //检测失败时加载三个文件

both: 'js/for-all.js' //最后无论检测结果如何，都加载一个名为for-all.js 的文件。

});

      必要时将导航链接转换为下拉菜单:BootStrap

       高分辨率设备（未来趋势）