浏览器及兼容处理问题

我可能是程序员里最帅的，啊哈哈

 

一、浏览器发展

浏览器作为日常上网和前端程序员的调试工具，它能让你加入全球的网络，通过一个窗口就能够连接世界。当你用浏览器时有没有想过浏览器的发展历史？面对市场上繁多的浏览器你又为什么偏爱你现在用的？

 

二、五大主流浏览器：

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：①

<div> <img src = “#”></div>

，（将div与img写在一行，如前所示。）

②将<img>转化为块状元素，给<img>添加声明

（display:block）

1.2 dt / li 中图片间隙

问题描述：在dt 或 li中添加图片出现图片间隙，主要出现在IE6版本中。

hack：添加声明

（display：block；overflow：hidden）

2、默认高度问题

问题描述：在IE6以下版本中，部分块状元素拥有默认高度（低于18px出现。）当块状元素的height:<18px时，会有一个默认高度18px左右。

问题如下：

               

hack：①给元素添加声明：

font-size：0px；

hack：②给元素添加声明：

overflow：hidden；

3、双倍浮向（双倍边距）

问题描述：在IE6以下版本中，浏览器解析浮动元素时，会错误的把向边的边界加倍显示。

hack：给浮动元素添加声明：

display：inline；

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）。

转载于:https://my.oschina.net/chaojiaheng/blog/1648063