浏览器相关兼容及解决方法

A、为什么会出现浏览器兼容问题？

	 1、各大厂商出于自身利益考虑而设置的种种技术壁垒，都让CSS应用起来比想象得要麻烦
	 2、由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码也很难重和，这就为各种莫名其妙的Bug(代码错误）提供了温床

B、浏览器内核以及代表作品

	 1、Trident   代表作：IE
	 元老级内核之一，由微软开发，并于1997年10月首次在ie 4.0中使用，凭借其windows垄断优势，Trident市场占有率一直很高。然而垄断并非，没有竞争就没有进步，长期以往，Trident内核一度停滞不前，更新缓慢，甚至一度与W3C标准脱节。2011年，从ie 9开始，Trident开始支持HTML5和CSS 3，因此我们也经常会看到有些网站在浏览时会提示用户（在Internet Explorer 9.0+以上浏览效果最佳）。前端程序员做浏览器兼容一般也不再会考虑ie 8之前的浏览器了。
	 2、Gecko 代表作：Mozilla
	 元老级内核之一，由Netscape公司Mozilla组织开发。1998年，Netscape在于IE浏览器竞争失利之后，成立了非正式组织Mozilla，由其开发新一代内核，后命名为“Gecko”。FireFox也是这班人开发出来了，因此这也就是Mozilla一直使用的内核。
	 Gecko的特点是代码完全公开，因此其开发程度很高，全世界的程序员都可以为其编写代码，增加功能。
	 3、WebKit : 苹果 & 谷歌旧版本
	 这是苹果公司开发的内核，也是其旗下产品Ssfari浏览器使用的内核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分别是从KDE的KHTML和KJS衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统开发。
	 Chrome、360极速浏览器以及搜狗高速浏览器也使用Webkit作为内核（在脚本理解方面，Chorome使用自己研发的V8引擎）。
	 4、Blink : 代表作：谷歌 & Opera
	 这是由Google和Opera Software开发的浏览器排版引擎，Google计算将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月公布了这一消息。这一渲染引擎是开源引擎Webkit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）浏览器中使用
	 5、Presto   ( Opera前内核 已经废弃 )

C、兼容相关的专业术语

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

常见的浏览器兼容

    A、跟img相关的兼容以及解决方法
		1)图片有边框BUG  
		当图片加<a href=“#”></a>在IE上会出现边框
		Hack:给图片加border:0;或者border：none；
		2）图片缝隙
		描述：在网页中插入图片时，图片会向下方撑大大约三像素。	
		hack1:将<img>转为块状元素，给<img>添加声明：display:block;
		hack2：给img添加声明 vertical-align：top；
		
	 B、表单相关的兼容以及解决方法
		1）表单元素距离顶部间距不一致
		hack:给表单元素添加声明：float:left;
		
	 C、其他相关兼容和解决方法
		1）margin-top的兼容
		子元素没设置任何浮动，设置了margin-top属性后，会错误的把margin-top的属性值添加给父元素
		hack1:给子元素或者父元素设置浮动
		hack2：给父元素添加上边框
		hack3：给父元素添加overflow：hidden；
		2）鼠标指针bug
			描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明。
			hack：cursor:pointer
		3）透明属性
			兼容其他浏览器写法：opacity:value;(value的取值范围0-1;
			IE浏览器写法：filter:alpha(opacity=value);取值范围 0-100(整数)
			
		4）谷歌浏览器最小字号支持到12px，12px以下的字号不支持
		hack1：直接切图
		hack2：在html或者body里添加一句谷歌浏览器专有的属性
				html,body{ -webkit-text-size-adjust:none; }
				注意点：在新版本的谷歌浏览器里已经无效。
		hack3：CSS3的一个缩放属性：transform:scale()
		例如：.a3{font-size: 10px;transform: scale(0.83);float: left;transform-origin: left;}
		/*这个数字0.833，是缩放比例，可以根据你自己的情况不同而不同。*/
		5）所有浏览器的字体不统一
			hack：给body统一设置字体  比如font-family:微软雅黑

IE浏览器相关兼容（IE浏览器的相关兼容不做重点记忆，了解就好）

     A：图片png24格式的兼容，png24格式在IE6上不透明
		hack：把png24格式换成png8或者GIF格式
	 B：默认高度	(如果是需要看不见一定要加height：0；如果是需要其他的数值，那么就给其他的数值)
		描述：在IE7或者IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
		hack1:给元素添加声明：font-size:0;
		hack2：给元素添加声明：overflow:hidden;	
	C、双倍浮向（双倍边距）（只有IE6出现）
		描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
		hack:给浮动元素添加声明：display:inline;
	D、在IE6及更低版本的浏览器里，如果想去掉input的默认边框，不能设置border：none；
		hack：设置input{border：0；}
	E、如果设置了input的高度，在其他浏览器上显示的value的内容是垂直居中的，但是在ie6上是在顶部的
		hack：给input添加一个行高等于它的高度。
	F、在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）
		hack：给右面的浮动元素添加声明：clear:right; 
	G、IE7及以下浏览器li有时候会莫名的向下撑大3-4像素。
		hack:给li添加一个 +margin-top：-3px或者-4px

 这朵小花花送给你，希望你可以每天开心快乐😊o(*￣▽￣*)ブ。