浏览器兼容问题，是指因为不同的浏览器对同一段代码有不同的解析，可能会导致浏览器对网页内容解读错误，出现乱码、变形、信息错乱等现象，影响页面的美观和使用。
无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是经常会碰到和必须要解决的问题。
确定兼容目标
1是否需要兼容
在开发网页的时候，由于时间成本的原因，不可能做到全浏览器都兼容。所以在开发之前需要统计目标群体使用的是什么浏览器。假如某一款浏览器超过某个使用比例，就需要针对这款浏览器做兼容处理了。
2兼容到何种程度（渐进增强和优雅降级）
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。功能优先，扩充体验，适合特定群体。
优雅降级 graceful degradation：
针对高版本浏览器进行构建页面，然后再针对低版本浏览器进行兼容。减少用户体验的供给，直至保证最基本的功能。体验优先，功能衰退，促进用户浏览器升级。
兼容流程
1使用调试工具，找出有问题的属性
2使用查询工具，确定属性的兼容性
3使用搜索工具，找出相应兼容办法
4没有兼容办法，考虑使用其他方式实现
调试工具
-
IE浏览器
1 安装虚拟机
优：最稳定，最方便
缺：需要安装，安装时间长
2 使用border
适合IE6版本
3 使用浏览器开发者工具
适合IE7以上版本 快捷键F12
浏览器兼容方法
css 兼容
-
解析
由于不同的浏览器的不同版本，对CSS的解析认识不完全一样，会导致生成的页面效果不一样。为了统一页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。（大部分是为了IE浏览器） -
目的
使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。 -
3种表现形式：
1 属性前缀法(即类内部Hack) 例如：
IE6能识别下划线和星号，
IE7能识别星号，但不能识别下划线，
IE6~IE10都认识\9，
firefox上述三个都不能识别。
2 选择器前缀法 例如：
IE6能识别 *html .class{}，
IE7能识别 *+html .class{} 或者*:first-child+html .class{}
3 IE条件注释法（即HTML条件注释Hack） 例如：
在 IE6 中生效：
在IE7下生效
Tips
一般情况下，我们尽量避免使用CSS hack，但是有些情况为了顾及用户体验实现向下兼容，不得已才使用hack。使用hack虽然对页面表现的一致性有好处，但过多的滥用会造成html文档混乱不堪，增加管理和维护的负担。
【 更多hack详细写法】 【 hack写法查询工具】
<HTML元素>默认样式 兼容
-
解析
HTML标签在浏览器中都有默认的样式，不同的浏览器的默认样式之间是存在区别的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。 -
目的
解决浏览器在默认样式上的诸多差异和问题。 -
2种解决方案：
1reset.css浏览器的默认样式全部重置，再重新添加。 reset.css 适用场景
2Normalize.css保留浏览器的原来样式并且做到每个浏览显示一致。
Normalize.css的优点 -
区别
1 Normalize.css 保护了有价值的默认值
2 Normalize.css 修复了浏览器的bug
3 Normalize.css 不会让你的调试工具变的杂乱
4 Normalize.css 是模块化的
5 Normalize.css 拥有详细的文档
Normalize.css是作为一种CSS reset的替代方案出现的，更温和，更轻量级，换言之就是引起的问题更少，适用场景更多，所以一般情况下推荐使用。
常见兼容问题
1 不同浏览器的标签默认的外补丁和内补丁不同
解决方案： *{margin:0;padding:0;}
2 块属性元素float时有横向margin，在IE6中显示margin变大
解决方法：float { display：inline；}
3 min-width/height和 Max-width/height在IE6中无效
解决方案：overflow:hidden;或者设置行高line-height 小于你设置的高度。
4 img在有些浏览器中有默认的间距
解决方案：使用float属性为img布局
5 定义元素的不透明度
filter：alpha（opacity=80）；/ie支持该属性/
opacity：0.8；/支持css3的浏览器/
研究兼容原因
IE浏览器
-
解析
IE浏览器兼容问题的根源之一在于IE盒模型 与 标准盒模型的差别
IE盒模型 width=border+padding+内容宽度
标准盒模型 width=内容宽度 -
方案
1 添加<!DOCTYPE HTML>声明，使 IE678使用标准盒模型。
2 box-sizing属性：以特定的方式定义匹配元素
content-box：标准盒模型，即width=内容宽度
border-box：IE盒模型 ，即width=border+padding+内容宽度
网友评论