浏览器兼容性

浏览器兼容性

一、认识浏览器

1）主流浏览器
Internet explorer、Safari、Mozilla Firefox、Google chrome、opera、百度、360、搜狗、傲游

2）最早的浏览器
Mosaic/Netscape navigator（网景领航者）（1994-2008）简称NN

3）浏览器战争

• 第一次浏览器大战发生在上个世纪90年代，微软发布了它的IE浏览器，和网景公司的Netscape navigator浏览器大打出手。
• 第二次浏览器大战发生在20世纪。战争产物：Internet explorer 9

二、五大浏览器内核

五大浏览器内核

• Trident(MSHTML)(三叉戟；三叉线；三尺鱼叉)
• Gecko（壁虎）
• Presto（迅速的）
• Webkit(Safari内核，chrome内核原型，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核)
• Blink（由Google和opera software开发的浏览器排版引擎）。

五大浏览器内核代表作品

• Trident: IE、maxthon（遨游）、腾讯、Theworld世界之窗、360浏览器。
  代表作品IE，因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或mshtml，此内核只能应用于Windows平台，且是不开源的。

• Gecko：代表作品Mozilla Firefox是开源的，它的最大优势是跨平台，能在Microsoft Windows、Linux和macOS x等主要操作系统上运行。

• Webkit：代表作品Safari、chrome、遨游浏览器3，是一个开源项目。

• Presto：代表作品Opera（前内核），Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。Opera现已改用Google chrome的Blink内核。

• Blink：由Google和opera software开发的浏览器排版引擎，2013年4月发布。

三、关于浏览器兼容的一些概念和原因

为什么会出现浏览器兼容问题？
由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的bug（代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让css应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。

css bug、css hack和filter

• 1）css bug：css样式在各浏览器中解析不一致的情况，或者说css样式在浏览器中不能正确显示的问题称为css bug.
• 2）css hack：css中，hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为它们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为。
• 3）Filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，filter是一种用来过滤不同浏览器的hack类型。

*使用hack带来的一些副作用
降低了css代码的可读性。增加了代码的负担。

*使用css hack和filter通常有两种方法：

• 1）一种是利用浏览器自身的bug，来隐藏或显示样式或声明；
• 2）另一种是浏览器对css支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。

四、常见的cssbug和css hack

1） 图片间隙----针对所有块元素容器

• A）div中图片间隙（该bug出现在所有浏览器中）
  描述：在div中插入图片时，图片会将div下方撑大三像素。
  hack：将<img>转为块状元素，给<img>添加声明：display：block；
• B）当图片横着排的时候，图片和图片之间存在一定的间距
  hack：img{float：left；}

2） dt，li中图片间隙

• hack：将<img>转为块状元素，给<img>添加声明：display：block；

3）双倍浮向（双倍边距）（只有ie6出现）

• 描述：在ie6中，一个居左（或居右）浮动的元素放置进一个容器盒（box），并在浮动元素上使用了左边距（或右边距）在ie6内便产生双倍边距。
• hack：给浮动元素添加声明：display：inline；---->转行内元素

4）图片在ie浏览器上有蓝色的边框（加在a标签里）

• hack：给img的边写成0；img{border：0；}

5）默认高度（ie6、ie7）

• 描述：在ie6及以下版本中，部分块元素拥有默认高度（低于18px高度）
• hack1：给元素添加声明：font-size：0；
• hack2：给元素添加声明：overflow：hidden；

6）表单元素距离顶部间距不一致（ie，moz，c，o，s）

• 描述：表单元素距离顶部的距离不一致
• hack：给表单元素添加声明：float：left；

7）按钮元素默认大小不一

• 描述：各浏览器中按钮元素大小不一致
• hack：统一大小/(用a标记模拟)

8）百分比bug

• 描述：在ie6及以下版本中解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）
• hack：给右面的浮动元素添加声明：clear:right;

9)鼠标指针bug

• 描述：cursor属性的hand属性值只有子啊ie9以下浏览器识别，其他浏览器不识别该声明，cursor属性的pointer属性值ie6.0以上版本及其他内核浏览器都识别该声明。
• hack：如统一某元素鼠标指针形状为手型，
  应添加声明：cursor：pointer；

10）子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性添加给父元素

• hack1：给父元素添加overflow：hidden；声明。
• 如果子元素设置了浮动属性也不会出现这个问题

11）当给li中的a转成block；并且有height，并有float的时候，li中没设置浮动会出现阶梯显示，hack：同时给li加float；

12）Input的type类型是text的时候，提示信息用value表示，如果设置input的高度，在其他浏览器上显示的value的内容是垂直居中的，但在ie6上是在顶部的，解决的方法就是给input添加一个行高等于等它的高度。

转载于:https://www.cnblogs.com/zhuxiaopeng/p/6693472.html