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

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阅读 14,686评论 1 92
  • 1.什么是 CSS hack 由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozi...
    Feiyu_有猫病阅读 3,483评论 0 2
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 4,997评论 0 1
  • 一、如何调试 IE 浏览器 IE7以上版本自带的开发者工具,IE6可以用border的方法;例:IE11的开发者工...
    __Qiao阅读 4,783评论 2 17
  • 一树芳郁为风悸动一地 一年夏日因你湿了生气 在无人的岸边赏你 望月的冷光伤自己 让夜的荒凉结一朵老去 香气却在轮回...
    三条命的猫阅读 1,248评论 0 2