浏览器兼容性
浏览器兼容性
一、认识浏览器
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添加一个行高等于等它的高度。
