刚刚入行的时候公司的代码版本管理库使用的是Gitee,因此图方便我的一些分享都是在OSChina社区发布，如今重回掘金希望给一个star Github github.com/chaojiaheng
本文章发布至发布于 2018/03/20 19:40 禁止转载 my.oschina.net/chaojiaheng…
说浏览器兼容前先讲一下浏览器相关的历史
一、浏览器发展
浏览器作为日常上网和前端程序员的调试工具，它能让你加入全球的网络，通过一个窗口就能够连接世界。当你用浏览器时有没有想过浏览器的发展历史？面对市场上繁多的浏览器你又为什么偏爱你现在用的？
二、五大主流浏览器：
-
1、chrome：（谷歌）追求简洁、快速、安全，个人认为是最好用、速度最快的浏览器。
-
2、Internet Explorer 简称IE，微软公司旗下浏览器。
-
3、firefox浏览器，简称FF浏览器，mozilla公司旗下浏览器，个人认为第二好用浏览器。
-
4、safari浏览器，苹果公司旗下浏览器，在苹果系统下是很优秀的浏览器，已停止对windows系统的支持。
-
5、opera浏览器，挪威厂商opera旗下浏览器，该公司还在研发另一款浏览器opera next。
三、五大主流浏览器内核
1、Trident内核：
代表作品是IE，因IE捆绑在Windows中，所以占有极高的份额，又称为IE内核或MSHTML，此内核只能用于Windows平台，且不是开源的。
代表作品还有腾讯、Maxthon（遨游）、360浏览器等。但由于市场份额比较大，曾经出现脱离了W3C标准的时候，同时IE版本比较多，
存在很多的兼容性问题。
2、Gecko内核：
代表作品是Firefox，即火狐浏览器。因火狐是最多的用户，故常被称为firefox内核它是开源的，最大优势是跨平台，在Microsoft Windows、Linux、MacOs X等主
要操作系统中使用。
Mozilla是网景公司在第一次浏览器大战败给微软之后创建的。有兴趣的同学可以了解一下浏览器大战
3、Webkit内核：
代表作品是Safari、曾经的Chrome，是开源的项目。
4、Presto内核：
代表作品是Opera，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了
Presto
5、Blink内核：
由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了
四、浏览器兼容
1、间隙问题
1.1 div图片间隙
描述：在div中插入图片，div下方将会被图片撑大3px（主要出现在IE6以下版本中）。
hack：(1)
<div style="border:1px dashed red">
<img src = https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/19/16f1e1de11756491~tplv-t2oaga2asx-image.image;
</div>
将div与img写在一行，如上图所示，img标签下方有3px 的间隙
(2)解决方案：将转化为块状元素，给
添加（display:block）声明
<div style="border:1px dashed red">
<img src = https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/19/16f1e1de11756491~tplv-t2oaga2asx-image.image style="display:block">
</div>
1.2 dt / li 中图片间隙
问题描述：在dt 或 li中添加图片出现图片间隙，主要出现在IE6版本中。
<li style="border:1px dashed red">
<img src = https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/19/16f1e1de11756491~tplv-t2oaga2asx-image.image style="display:block">
</li>
<dt style="border:1px dashed red">
<img src = https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/12/19/16f1e1de11756491~tplv-t2oaga2asx-image.image style="display:block">
</dt>
以上两种写法都会出现以下问题：图片上方被撑起
hack：解决方案给li添加声明（display：block；overflow：hidden）
<li style="border:1px dashed red;display：block；overflow：hidden">
<img src = "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-assets/v3/static/img/logo.a7995ad.svg~tplv-t2oaga2asx-image.image" style="display:block">
</li>
2、默认高度问题
问题描述：在IE6以下版本中，部分块状元素拥有默认高度（低于18px出现。）当块状元素的height:<18px时，会有一个默认高度18px左右。
问题如下：
<div style="height:10px;width:auto;background:red"></div>
hack：解决方案 => 给元素添加声明：
font-size：0px；
overflow：hidden；
3、双倍浮向（双倍边距）
问题描述：在IE6以下版本中，浏览器解析浮动元素时，会错误的把向边的边界加倍显示。
hack：给浮动元素添加声明：
hack：②给元素添加声明：
4、百分比bug
问题描述：在IE6以下版本中，解析百分比时，会按照四舍五入原则计算导致：50%+50% > 100%
hack：给右边浮动元素添加声明
clear：right；
5、鼠标指针bug
问题描述：
cursor：hand；的声明只能在IE浏览器中识别。
cursor：pointer；的声明在IE6以上版本和其他内核浏览器可以识别。
hack：统一某元素鼠标指针形状为手型（hand），应添加声明
cursor：pointer
6、表单行高不一致
问题描述：在IE、火狐、欧朋、Safari、Chrome浏览器中表单的行高对齐方式不一致。
hack：给表单元素添加
float：left；
7、透明属性
IE写法：
filter：alpha（opacity=value）
兼容其他浏览器：
opacity：value；
8、属性值后缀
针对IE8加属性值后缀\o，如：
height：200px\o;
9、！important优先级声明
#box{height：60px！important；} 在IE8以上版本种支持。
hack：#box{
height：60px！important；
height：60px；//优先级声明必须要放到前面，至于为什么会这样先后顺序的写，请参考我写的：优雅降级vs渐进增强
}
浏览器兼容主要是针对IE浏览器的兼容，目前来说IE浏览器通过几次的改版，以往的问题基本不再存在，市面上也很少有企业去兼容IE6以下的版本（银行、政府、等金融机构可能在在坚守IE6）。
持续更新ing...（2019.12.19-20:58）
10、浏览器兼容前缀
-o-transform:rotate(7deg); // Opera
-ms-transform:rotate(7deg); // IE
-moz-transform:rotate(7deg); // Firefox
-webkit-transform:rotate(7deg); // Chrome
transform:rotate(7deg); // 统一标识语句
11、a 标签的几种 CSS 状态的顺序
很多新人在写 a 标签的样式，会疑惑为什么写的样式没有效果，或者点击超链接后，hover、active 样式没有效果，其实只是写的样式被覆盖了。
正确的a标签顺序应该是：==love hate==
link:平常的状态
hover:鼠标放到链接上的时候
visited:被访问过之后
active:链接被按下的时候
