今日内容：
- 1、认识浏览器和浏览器大战
- 2、五大浏览器内核和兼容相关的概念
- 3、常见的CSSbug和CSShack
一、常见的主流浏览器
1、主流浏览器
Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游
谷歌浏览器：Google Chrome，谷歌浏览器之前一直使用苹果的webkit内核，但是现在它与苹果内核分道扬镳，自己开创了新的blink内核，这个内核也在被欧朋（opera浏览器）共同采用和开发；
火狐浏览器：Mozilla Firefox ，内核是Gecko，它是开源的；
opera浏览器：内核是Blink；
Safari浏览器：使用的是苹果公司自己的内核:Webkit。
IE浏览器：是微软出品的浏览器，IE4以上版本都是Trident内核。由于垄断性，IE在很长一段时间内没有更新，导致两个后果：一是IE与W3C标准脱节，二是Trident内核大量的bug问题没得到及时解决。所以这就给了其他浏览器机会，比如firefox等。也正是这些原因，使Web前端开发人员大费折，特别是IE6正处在新旧交替的关键地方（已经逐渐被舍弃）。
2、最早的浏览器
Mosaic / Netscape Navigator(网景领航者)（1994-2008）简称NN。
二、五大浏览器内核
1、五大浏览器内核
Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉）不开源，只能在windows系统使用。
Gecko （壁虎）
Presto （ 迅速的）
Webkit （Safari、Chrome内核原型，它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
Blink (由Google和Opera Software开发的浏览器排版引擎)。
2、五大浏览器内核代表作品
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月发布。
三、浏览器兼容
1、为什么会出现浏览器兼容问题？
由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床。再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦。浏览器的兼容问题是我们必须去克服的。
2、CSS Bug、CSS Hack和Filter
(1)CSS Bug:CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.。
(2)CSS Hack:CSS中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为它们都属于个人对CSS代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch(补丁)来描述这种行为。
(3)Filter:表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型。
3、使用Hack带来的一些副作用
降低了CSS代码的可读性，增加了代码的负担。
4、设计CSS Hack和 Filter通常的两种方法
(1)一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；
(2)另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。
四、常见的CSSbug和CSShack
1、图片有边框BUG
CSSbug：在IE浏览器中，图片会出现边框
CSShack：给图片加border:0;或者border:none;
2、图片间隙
(1)div中的图片间隙BUG （该bug出现在所有浏览器中）
CSSbug：在div中插入图片时，图片会将div下方撑大大约三像素。(只要用块元素装图片，不写高度都会有3px bug。)
CSShack1：将图片转为块状元素，给添加声明：display:block;
CSShack2：给添加声明：vertical-align：top/bottom/left/right;选任意值。
CSShack3：给父级设置与图片大小相同的高度。
(2)当图片横着排的时候，图片跟图片之间存在一定的间距(原因：代码回车换行)
CSShack1：img{float:left;}
CSShack2：将
3、 dt、li中的图片也存在3px间隙
CSShack1：将转为块状元素，给
添加声明：display:block;
CSShack2：给添加声明：vertical-align：top/bottom/left/right;选任意值。
4、双倍浮向（双倍边距）（只有IE6出现）
CSSbug：IE6及更低版本浏览器在解析浮动元素时，一个居左（或居右）浮动的元素放置进一个容器盒(box)，并在浮动元素上使用了左边距(或右边距) ，在ie6内会错误地把浮向边边界（margin）加倍显示，产生双倍边距。
CSShack：（不论左浮动还是右浮动）给第一个浮动元素添加声明：display:inline;
5、 a标签嵌套图片在IE浏览器上有蓝色的边框
CSShack：给的边写成0或none；img{border:0;}
6、默认高度（IE6、IE7）
CSSbug：在IE6及以下版本中，部分块元素（ul、ol中的li）拥有默认高度（在16px左右；低于18px高度）
如果是当前元素没有设置高度：给li添加声明：
CSShack1：给元素添加声明：font-size:0;（还会有很小一段高度）
CSShack2：给元素添加声明：overflow:hidden;height：0；
如果当前元素设置了高度并且小于16px
CSShack1：给元素添加声明：font-size:0;
CSShack2：给元素添加声明：overflow:hidden;
7、表单元素距离顶部间距不一致[IE，MOZ,C,O,S]
CSSbug：表单元素行高对齐方式不一致（表单元素距离顶部元素距离不一致）（文本框、按钮）
CSShack：给表单控件添加声明：float:left;
8、表单元素默认大小不一
CSSbug：各浏览器中表单元素大小不一致
CSShack1：去掉边框，统一大小。或用a标记模拟（a标记的href属性可以跳转）
CSShack2：外边套一个标签，在这个标签里写按钮的样式（加宽高），把input的边框宽度减去。
CSShack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
一个网页里只能有一个form，如果form中除了边框和按钮还有其他内容，不可以直接用form，添加边框。在外层套一个div，给div添加样式。
9、百分比bug
CSSbug：IE6及以下版本中在解析百分比时，会按四舍五入方式计算，从而导致50%加50%大于100%的情况。 （也会受系统影响）
CSShack：给右面的浮动元素添加声明：
clear:right; 清除右浮动。
clear:left; 清除左浮动。
clear:both; 清除两边的浮动。
或者使用过滤器：_clear:both;
clear:both;在常规浏览器中，右面元素会被挤到下一行。所以需要使用过滤器，让这条语句在常规浏览器中不被识别。
10、鼠标指针bug
CSSbug：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器识别。
CSShack： 如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer。
cursor的取值:
auto默认、crosshair加号、text文本、wait等待、help帮助、progress过程、inherit继承、move移动、ne-resize向上或向右移动、pointer手形。
11、子元素margin-top传属性递给父元素
CSSbug：当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top属性后，会错误的把margin-top的属性值传递给父级元素上。
CSShack1：给父元素添加overflow:hidden；(推荐使用)
CSShack2：给父元素或者子元素添加浮动声明。（如果父元素设置了浮动属性也不会出现这个问题）
CSShack3：给父元素添加1px边框（注意宽高应减去相应边框大小）
12、透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1; 例：opacity:0.5; )
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)
13、li列表的BUG
当li里面的a转换成块元素的时候，如果想要让所有的列表项都在同一行上或者呈现阶梯状显示，需要给li和a都设置浮动(float)属性，否则，IE6里面会出现每个li独占一行的情况。
(1)当父元素(li) 有float:left;子元素(a) 没设置浮动的情况下会出现垂直bug；
CSShack：给父元素li和子元素a都设置浮动；
(2)当给li中的a转成block；并且有height、float的时候，li中没设置浮动会呈阶梯显示。
CSShack：同时给li也加float;
浮动添加给li，其他样式添加给a。
14、两个相邻元素上下margin会重叠
当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值；
CSShack1：直接设置一个属性为二者相加后的值；
CSShack2：给其中一个添加 display：inline-block；
15、在IE6及更低版本的浏览器里，如果想去掉input的默认边框
需将其border属性值设置成0，可兼容多个浏览器。
16、如果设置了input的高度，在其他浏览器上显示的value的内容是垂直居中的，但是在IE6上是在顶部的
解决的方法就是给input添加一个行高等于它的高度。(input的type类型是text的时候，提示信息用value表示)