摘要：一兼容性新标签在低于的浏览器中的识别解决以下浏览器对新增标签的不识别，并导致不起作用的问题。目前流行的库有以及，它们都可以修正很多已知的浏览器之间的差异性。
问题：经常遇到的浏览器的兼容性的情况、解决方法？
思路：首先明确项目要兼容哪些浏览器的最低版本，然后考虑到CSS样式和JavaScript在这些浏览器的兼容性。
一、HTML 兼容性
1.H5新标签在低于IE9的浏览器中的识别
html5shiv.min.js：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min.js: 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
引入respond.min.js，但要在css的后面（越早引入越好，在ie下面看到页面闪屏的概率就越低，因为最初css会先渲染出来，如果respond.js加载得很后面，这时重新根据media query解析出来的css会再改变一次页面的布局等，所以看起来有闪屏的现象）。
2.不同浏览器的标签默认的内/外补丁不同
虽然这些年来随着浏览器的迅速发展与规范的统一，浏览器特性碎片化的情况有所改善，但是在不同的浏览器之间仍然存在着很多的行为差异。而解决这种问题的最好的办法就是使用某个CSS Reset来为所有的元素设置统一的样式，保证你能在相对统一干净的样式表的基础上开始工作。目前流行的Reset库有 normalize.css, minireset 以及 ress ，它们都可以修正很多已知的浏览器之间的差异性。而如果你不打算用某个外在的库，那么可以使用如下的基本规则:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。
二、CSS 兼容性
1.IE的条件注释hack：
2.IE 属性过滤器（较为常用的hack方法）
针对不同的 IE 浏览器，可以使用不同的字符来对特定的版本的 IE 浏览器进行样式控制。
3.浏览器 CSS 兼容前缀
使用特定的浏览器前缀是CSS开发中常见的工作之一，不同的浏览器、不同的属性对于前缀的要求也不一样，这就使得我们无法在编码过程中记住所有的前缀规则。并且在写样式代码的时候还需要加上特定的浏览器前缀支持也是个麻烦活，幸亏现在也是有很多工具可以辅助我们进行这样的开发:
Online tools: Autoprefixer
Text editor plugins: Sublime Text, Atom
Libraries: Autoprefixer (PostCSS)
4.a 标签的几种 CSS 状态的顺序
很多人在写 a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。
正确顺序:L-V-H-A : a:link, a:visited, a:hover, a:active {}
":link": a标签还未被访问的状态；
":visited": a标签已被访问过的状态；
":hover": 鼠标悬停在a标签上的状态；
":active": a标签被鼠标按着时的状态；
5.IE6 双倍边距的问题
在 ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题
解决方法：display: inline;
6.透明度的兼容CSS设置
IE用 filter:alpha(opacity=60)，而其他主流浏览器用 opacity:0.6;
| 三、JavaScript的兼容性 | ||
|---|---|---|
| 兼容性对象 | 一般浏览器 | IE |
| 绑定和删除事件处理程序 | addEventListener removeEventListener | attachEvent detachEvent |
| 获取事件的目标 | event.target | event.srcElement |
| 阻止事件默认行为 | event.returnValue | event.preventDefault |
| 停止事件冒泡 | stopPropagation | cancelBubble |
| 创建XHR对象 | XMLHttpRequest构造函数 | activeXObject |
参考文章：
bootstrap的其他CDN地址
respondjs实现思路
20个编写现代CSS代码的建议
浏览器兼容性问题解决方案 · 总结
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/97212.html
摘要：对浏览器兼容问题，一般分，，兼容，兼容。特别是增加了许多新标签，低版本浏览器会存在不兼容的情况。出现这个问题的原因是之前的浏览器都会给标签一个最小默认的行高的高度。 **我所说的兼容性问题，主要是说IE与几个主流浏览器如firefox，google等。而对IE浏览器来说，IE7又是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于大家都一致...
摘要：浏览器兼容问题四行内属性标签，设置后采用布局，又有横行的的情况，间距问题症状里的间距比超过设置的间距碰到几率解决方案在后面加入备注行内属性标签，为了设置宽高，我们需要设置除了标签比较特殊。 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *...
摘要：浏览器兼容问题四行内属性标签，设置后采用布局，又有横行的的情况，间距问题症状里的间距比超过设置的间距碰到几率解决方案在后面加入备注行内属性标签，为了设置宽高，我们需要设置除了标签比较特殊。 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *...
摘要：浏览器兼容问题四行内属性标签，设置后采用布局，又有横行的的情况，间距问题症状里的间距比超过设置的间距碰到几率解决方案在后面加入备注行内属性标签，为了设置宽高，我们需要设置除了标签比较特殊。 (1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。碰到频率:100%解决方案：CSS里 *...
摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻 这里和朋友们简单探讨一下个人对于前端兼容性的一些理解： 在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...
阅读 2814·2021-11-25 09:43
阅读 2434·2021-10-09 09:44
阅读 2779·2021-09-22 15:49
阅读 2520·2021-09-01 11:43
阅读 2522·2019-08-30 14:16
阅读 428·2019-08-29 17:24
阅读 3007·2019-08-29 14:00
阅读 1358·2019-08-29 13:05
