浏览器兼容

1、浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。

2、五大浏览器内核
（1）Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉）
（2）Gecko （壁虎）
（3）Presto （ 迅速的）
（4）Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
（5）Blink (由Google和Opera Software开发的浏览器排版引擎)

说明：如果想要一些浏览器能够兼容，需要加一些前缀
Mozilla内核需要加上-moz-，
Webkit内核需要加上-webkit-，
Presto内核 -o-
IE8 需要加上 -ms-
3、五大浏览器内核代表作品

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

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

（3）Webkit :代表作品Safari、Chrome ， 是一个开源项目。

（4）Presto :代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它也是世界上公认的渲染速度最快的引擎。

（5）Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

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

设计CSS Hack和 Filter通常有两种方法：（1）一种是利用浏览器自身的Bug，来隐藏或显示样式或声明；（2）另一种是利用浏览器对CSS支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。

使用Hack带来的一些副作用
降低了CSS代码的可读性，增加了代码的负担。
1、图片下方有空隙产生(加了边框而产生的空隙)
（1）hack1：img{vertical-align:middle/top/bottom;}
（2）hack2：img{display:block;}
2、div中的图片间隙
描述：在div中插入多个图片时，图片与图片之间会有间隙
（1）hack1:将代码写在一行上
（2）hack2:将转为块状元素，给添加声明：float:left;
（3）父级元素font-size:0;或word-spacing:负值；
3、IE给图片加超链接时，图片自动会加上边框（紫色两像素的边框）
解决办法：img{border:none/0}
4、图片鼠标滑过边框显示一半问题（给图片加超链接时，链接加边框，图片无边框）
解决办法：给a标签添加边框，并且把a标签打成块级元素。a:hover时加边框就不会出现一半的问题了。其它：给img加边框而不是给a标签加边框,并且没放上去之前也要给图片加个1像素的边框。
5、input与img垂直方向不对齐问题
解决办法：img{vertical-align:middle}

1.不同浏览器的标签默认的外边距和内边距不同
问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决办法：*{margin:0;padding:0;}
2.两个块元素，竖向的margin值不增加，会重叠，其间距为最大margin值
3. IE6横向margin加倍（产生因素：块属性、float、有横向margin ）
解决方法：display：inline；
4.给子元素加margin-top时，浏览器中是给父元素添加了margin-top的值了
解决方法：给父元素添加padding-top:margin-top的值；或者给父元素添加padding-top:0.1px;
或者给父级元素加border
5.经典3像素bug
产生条件：IE6浏览器，浮动块元素与未浮动块元素处于同一行，有默认的3px间距。
解决办法：设置非浮动元素浮动。

1. opacity 定义元素的不透明度
   解决办法：
   filter：alpha（opacity=80）；/ie支持该属性/
   opacity：0.8；/支持css3的浏览器/
   2.游标手指cursor
   cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
   3.高度自适应问题（最小高度）
   IE6不认识min-height，IE6里的内容会自动撑开
   解决办法：div { height:auto!important; height:200px; min-height:200px; }
2. a标签hover不适用于所有标签
   产生条件：IE6浏览器中hover只支持a标签的使用，不支持一切其它标签使用；
   解决办法：合理用a标签嵌套其他行内标签或者用javascript模拟a的hover效果；
   5.一行文本垂直居中问题
   vertical-align: middle;/不管用/
   解决办法：height:30px;line-height:30px;

斜角的纯CSS制作规范
span{
width: 0;
height: 0;
border: 4px solid red;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
border-top: 4px solid transparent;
}
1.什么是CSS Hack
不同的浏览器对CSS的解析结果是不同的，因此会导致相同的CSS输出的页面效果不同，这就需要CSS Hack来解决浏览器局部的兼容性问题。而这个针对不同的浏览器写不同的CSS 代码的过程，就叫CSS Hack。
2.CSS Hack的分类
IE条件注释Hack
CSS选择器Hack
CSS属性Hack
!important
注：css hack的书写顺序：总结出的规律就是：先一般，再特殊

1.IE条件注释Hack
（1）

（2）

条件注释的基本结构和HTML的注释( )是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们