所谓浏览器兼容性问题，是指不同浏览器对同一段代码的解析不同，导致页面显示效果不统一的情况。 在大多数情况下，我们的要求是无论用户使用什么浏览器来查看我们的网站或登录我们的系统，都应该有统一的显示效果。 因此，浏览器兼容性是前端开发者经常遇到且必须解决的问题。
在学习浏览器兼容性之前，我想把前端开发者分为两类：
第一种
1个
是一个前端开发人员，根据设计图精确开发，可以说是精确到1px。 他们很容易发现设计图的不足，在极少数情况下，他们会遇到浏览器兼容性问题，而这些问题往往是浏览器的bug，他们制作的页面后期维护起来也很方便兼容浏览器，并且有很少有代码复用问题，可以说是比较扎实可靠的代码。
第二类
2个
就是基本按照设计图开发的前端开发人员。 很多细节差别很大。 还不如间距、行高、图片位置等，往往相差几个px。 一定效果的实现是经过反复调试得到的。 造成这种效果的具体原因还不清楚，整体布局很脆弱。 一点点改变就是一团糟。 不知道为什么代码要这样写。 这些类型的开发人员经常受到兼容性问题的困扰。 修改后，这个浏览器把另一个浏览器搞砸了。 没有任何线索可以来回更改它。 事实上，他们遇到的大部分兼容性问题不应该归咎于浏览器，而是他们的技术本身。
本文主要针对第一类，严谨的开发者，所以这里主要从浏览器解析差异的角度来分析兼容性问题
浏览器兼容性问题1：
不同浏览器的tab默认的outer patch和inner patch是不一样的
问题症状：随便写几个标签，没有样式控制，各自的margin和padding相差很大。
遭遇频率：100%
解决方案：*{margin:0;padding:0;} in css
备注：这是最常见也是最容易解决的浏览器兼容性问题。 几乎所有的 css 文件都以通配符 * 开头，用于将每个标签的内部和外部补丁设置为 0。
浏览器兼容性问题 2
block属性标签为float后，有水平边距，ie6显示的边距比设置的大
问题症状：常见症状是ie6中最后一块被推到下一行
遇到频率：90%（稍微复杂的页面都会遇到，浮动布局是最常见的浏览器兼容性问题）
解决方案：在浮动标签样式控件中添加display:inline； 将其转换为内联属性
备注：最常用的布局是div+css，div是典型的块属性标签。 我们通常使用div float来实现水平布局。 如果水平间距设置是用边距实现的，这是必须的。 会遇到兼容性问题。
浏览器兼容性问题三
设置一个小的高度标签（一般小于10px），在ie6，ie7中，高度超过游中自己设置的高度
问题症状：这个标签在ie6、7和优优中的高度失控，超过了自己设置的高度
遭遇频率：60%
解决方法：对超出高度的标签设置overflow:hidden； 或将行高 line-height 设置为小于您设置的高度。
备注：这种情况一般出现在我们设置小圆角背景的label中。 出现这个问题的原因是ie8之前的浏览器会给标签一个默认的最小行高。 即使你的标签是空的，这个标签的高度还是会达到默认的行高。
浏览器兼容性问题 4
内联属性标签，设置display:block后，采用float布局，有水平边距，ie6间距bug（类似第二种）
问题症状：ie6中间距比例超过设置间距
相遇几率：20%
解决方法：添加display:inline;display:table; 显示后：块；
备注：对于行内属性标签，为了设置宽高，我们需要设置display:block； （除了输入标签是特殊的）。 使用float布局和horizontal margin后，在ie6下，block属性float后出现horizontal margin的bug。 但是因为是inline属性标签，如果我们加上display:inline，它的高宽是不能设置的。 这时候我们还需要在display:inline之后加上display:talbe。
浏览器兼容性问题 5
图片默认有间距
问题症状：几个img标签放在一起时，有些浏览器会有默认间距，加上问题1中提到的通配符就不行了。
相遇几率：20%
解决方案：img布局使用float属性
备注：因为img标签是内联属性标签，所以只要不超过容器的宽度，img标签就会排成一排兼容浏览器，但是有些浏览器的img标签之间会有空隙。 去除这个间距并使用浮动是正确的方法。
浏览器兼容性问题 6
标签最小高度设置min-height不兼容
问题症状：由于min-height本身是一个不兼容的css属性，设置min-height时不能很好的兼容各种浏览器
遭遇几率：5%
解决方法：如果我们要设置标签的最小高度为200px，需要做的设置是：{min-height:200px; 高度：自动！重要； 高度：200px； 溢出：可见；}
备注：在打开B/S系统的前端时，我们很多时候都有这个需求。 当内容小于某个值（如 300px）时。 容器高度为300px； 当内容的高度大于这个值时，容器的高度会升高，而不是滚动条。 这个时候我们就会面临这个兼容性问题。
浏览器兼容性问题7
透明的兼容 css 设置
方法是：我们每次写一小段代码（布局中的一行或一块），我们都要检查它是否兼容不同的浏览器。 当然，如果我们熟练到一定程度就不会那么麻烦了。 推荐给经常遇到兼容性问题的新手。 很多兼容性问题是由于浏览器对标签默认属性的解析不同造成的。 只要我们稍作设置，就可以轻松解决这些兼容性问题。 如果我们熟悉标签的默认属性，我们就可以理解为什么会出现兼容性问题以及如何解决这些问题。
/* CSS 破解*/
我很少用hack，可能是个人习惯吧，不喜欢写不兼容的代码，然后用hack来解决。 但是hacker还是很容易上手的。
使用hacker，我可以将浏览器分为3类：ie6； ie7和傲游； 其他（ie8 chrome ff safari opera 等）
ie6识别的黑客是下划线_和星号*
ie7识别的hacker是星号*（包括上面问题6中的!important也是hack的一种，但实用性较差。）
比如这样一个css设置height:300px;*height:200px;_height:100px;
因为优先级相同的属性和冲突的属性都会覆盖前面的，所以写的顺序很重要。
最后，严谨的开发者会有一套适合自己的RESET.CSS。 根据自己的经验，尽量避免容易出现的不兼容问题。 为了减少 hack 的使用，尽量满足 W3C 标准。
原文链接：
admin
