浏览器兼容

目录
一、常见浏览器兼容问题
二、解决方法

---

一、关于浏览器

大家可以猜出上面的浏览器分别是什么？
1、IE浏览器 2、谷歌chrome 3、世界之窗 4、火狐firefox 5、NN 6、傲游 7、 8、欧朋 9、腾讯TT
1.1 常用的浏览器
	主流浏览器：IE、firefox、google chrome、opera、百度、360、搜狗、傲游
最早安尔碘浏览器： Mosaic / Netscape Navigator（网景领航者）1994-2008 简称NN
1.2 浏览器大战
	第一次发生在上个世纪90年代，微软发布了它的IE和网景领航者大打出手。第二次发生在20世纪，战争产物IE9。
1.3 五大浏览器内核
	Trident（MSHTML）（三叉戟、三叉线、三齿鱼叉）
	Gecko（壁虎）
	Presto（迅速的）
	Webkit（safari内核，chrome内核原型，它是苹果公司自己的内核，也是苹果的safari浏览器使用的内核）
	Blink（由Google和Opera Software 开发的浏览器排版引擎）
1.4 五大浏览器内核代表作品
	Trident：IE、Maxthon（傲游）、腾讯、Theworld（世界之窗）、360浏览器 代表作品IE，因为IE捆绑在windows中，所以占有极高的市场份额，又称IE内核或是MSHTML，此内核之应用于Windows平台，其实不开源的。
	Gecko：代表作品Mozilla Firefox是开源的，它的最大优势是跨平台，能在Microsoft windows、linuk和macos x等主要操作系统上运行。
	Webkit：代表作品safari、chrome，是开源项目
	Presto：代表作品Opera，Presto是由Opera Software开发的浏览器排版引擎。他是世界上公认的渲染速度最快的引擎
	Blink：由Google和Opera Software 开发的浏览器排版引擎，2013年4月发布

---

二、解决方法

2.1 为什么会出现浏览器兼容问题？
	由于各大主浏览器由不同的厂家开发，所用的核心架构和代码也很难重合，这就为各种莫名其妙的bug提供了温床。再加上各大厂商处于自身利益考虑而设置的种种技术壁垒，都让css应用起来比想象的要麻烦。浏览器的兼容问题是我们必须去克服的。
2.2 Css Bug、Css Hack和Filter
	2.2.1 CSS Bug：css样式在各浏览器中解析不一致的情况，或者说css样式在浏览器中不能正确显示的问题成为CSS Bug
	2.2.2 CSS Hack：css中，Hack是指一种兼容css在不同浏览器中正确显示的技巧方法，因为他们都属于个人对css代码的非官方的修改，或非官方的补丁。有些人更喜欢使用patch来描述这种行为
	2.2.3 Filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的Hack类型
	2.2.4 *使用Hack带来的一些副作用
		降低了css代码的可读性，增加了代码的负担。
	2.2.5 *设计css hack和filter通常有两种方法
		一种是利用浏览器自身的bug，来隐藏或显示样式或声明
		另一种是利用浏览器对css支持的不完善，如对某些规则或语法还没有形成支持，来隐藏或显示样式。
2.3 IE常见css解析bug及hack
	2.3.1 图片间隙
	div中的图片间隙（该bug出现在ie6及更低版本中）
		描述：在div中插入图片时，图片会将div下方撑大三像素。
		hack1：将</div>与<img>写在一行上
		hack2：将<img>转为块状元素，给<img>添加声明{display:block；}
	dt中图片间隙（ie6）
		hack：将<img>转为块状元素，给<img>添加声明{display：block；}
	li中图片间隙
		hack1：img转为块状元素
		hack2：给ul设置font-size：0；
		hack3：给img设置{margin-bottom：-3px}
	2.3.2 双倍浮向（双倍边距）
		描述：当ie6及更低版本浏览器的解析浮动元素时，会错误地把浮向边界加倍显示
		hack：给浮动元素添加声明{display：inline；}
	2.3.3 默认高度（ie6）
		描述：ie6及以下版本中，部分块元素拥有默认高度（低于18px高度）
		hack1：给元素添加声明：font-size：0；
		hack2：给元素添加声明：overflow：hidden；
	2.3.4 表单元素行高不一致(IE,MOZ,C,O,S)
		描述：表单元素行高对齐方式不一致
		hack:给表单元素添加声明：float:left;
	2.3.5 按钮元素默认大小不一
		描述：各浏览器中按钮元素大小不一致
		hack1：统一大小/（用a标记模拟）
		hack2：在input上写按钮的样式，一定要把input的边框去掉。
		hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
	2.3.6 )百分比bug
		描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
		hack:给右面的浮动元素添加声明：clear:right;意思：清除右浮动。
	2.3.7 鼠标指针bug
		描述：cursor属性的hand属性值只有IE浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
		hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;
	2.3.8 透明属性
		IE浏览器写法：filter:alpha(opacity=value);取值范围（1-100）
		兼容其他浏览器写法：opacity:value;(value的取值范围0-1）
		filter:alpha(opacity=value)
		例如: filter:alpha(opacity=80); opacity:.8;
	2.3.9 li里a加 display：block; 出现行高不一致
		hack1：给a加display：inline-block
		hack2：给a加display：inline
2.4 过滤器
	2.4.1 下划线属性过滤器
		当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则。
		语法：选择符{ _属性：属性值；}
	2.4.2 !important 关键字过滤器
		它表示所附加的声明具有最高优先级的意思。
		但由于IE6及更低版本不能识别它，我们可以利用IE6的这个Bug作为过滤器来兼容IE6和其它标准浏览器。
		语法：选择符{属性：属性值!important;}
	2.4.3 *属性过滤器
		当在一个属性前面增加了*后，该属性只能被IE7浏览器识别，其它浏览器忽略该属性的作用。
		语法：选择符{*属性：属性值；}