解决浏览器兼容性一些常用的库--基础

CSS部分

normalize.css <small>下载 </small>

  • 原因:不同的浏览器在对于CSS默认样式是不一样的。
    超链接,有些浏览器有下划线,有些浏览器没有;有些是蓝色,有一些又是黑色。
  • 作用:让不同的浏览器在渲染网页元素的时候形式更统一。
  • 使用方式:在所有的CSS之前,引用normalize.css即可。

Bootstrap默认引入了normalize.css,所以使用Bootstrap的时候,不需要再引用该文件。*

推荐资料:


JS部分

excanvas.js <small>下载 </small>

  • 原因:canvas标签在IE6~IE8浏览器上不被支持。
  • 作用:在IE6~IE8浏览器上模拟canvas标签。
  • 使用方式:在head标签条件注释引入即可。
<!--[if lt IE9 ]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

normalize.css下载地址

html5shiv.js <small>下载 </small>

  • 原因:HTML5标签在IE6~IE8浏览器上不被识别,不能添加CSS样式。
  • 作用:IE6~IE8识别HTML5标签,并且可以添加CSS样式。
  • 使用方式:在head标签条件注释引入即可。
<!--[if lt IE9 ]>
<script type="text/javascript" src="html5shiv.js"></script>
<![endif]-->

这个文件是Bootstrap结构中必须的条件注释引用,用来处理兼容性的。

respond.js <small>下载 </small>

  • 原因:IE6~IE8浏览器上不支持媒体查询,不能响应式布局。
  • 作用:使IE6~IE8浏览器支持媒体查询。
  • 使用方式:在head标签引入即可。
<!--[if lt IE9 ]>
<script type="text/javascript" src="html5shiv.js"></script>
<![endif]-->

这个文件是Bootstrap中条件注释引用的,用来处理兼容性的。


其他

modernizr.js <small>下载 </small>

  • 原因:HTML5和CSS3在低版本的浏览器支持比较低。
  • 作用:检测浏览器是否实现了某个HTML5或者CSS3特性
  • 使用方式:在head标签引入,还需要增加一些额外处理。

推荐资料:

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 7,614评论 1 82
  • 1.什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozi...
    Feiyu_有猫病阅读 103评论 0 2
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 241评论 0 1
  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    吴天乔阅读 747评论 2 15
  • 一树芳郁为风悸动一地 一年夏日因你湿了生气 在无人的岸边赏你 望月的冷光伤自己 让夜的荒凉结一朵老去 香气却在轮回...
    四条命的猫阅读 15评论 0 2