浏览器的兼容

一、主流浏览器（常用浏览器）

Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游

二、浏览器内核

*Trident: IE、Maxthon(遨游)、腾讯 、Theworld世界之窗、360浏览器
代表作品IE,因为IE捆绑在Windows中，所以占有极高的市场份额，又称IE内核或是
MSHTML，此内核只能应用于windows平台，且是不开源的。
*Gecko(壁虎)：代表作品Mozilla Firefox 是开源的,它的最大优势是跨平台，能在
Microsoft Windows、Linux和MacOS X等主要操作系统上运行。
*Webkit : 代表作品Safari、Chrome ， 是一个开源项目。
*Presto : 代表作品Opera ，Presto是由Opera Software开发的浏览器排版引擎。它
也是世界上公认的渲染速度最快的引擎 ( Opera前内核 已经废弃,现在欧鹏浏览器 用的
是 谷歌的 Blink )。
*Blink ：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。

三、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像素

解决方法一，

 vertical-align:top/middle/bottom

解决方法二，

img{
	display:block;
}

解决方法三，
（写浮动，会造成高度塌陷）

div{
	overflow:hidden;
	}
img{
	float:left;
	}

使用图片做超链接，在IE浏览器会解析出边框

解决办法

img{
	border:none;
}

表单行高不一致

解决办法

input{
	float:left;
	}

按钮大小不一致

解决办法:使用怪异盒模型

input{
	box-sizing:border-box;
	}

给按钮单独设置高度

.btn{
	height:50px;
	}

用超链接代替按钮

<a href="#">按钮</a>

给按钮外面嵌套一个标签，然后把边框去掉

用背景图片设置按钮

鼠标指针：鼠标变成小手

cursor:hand;(只有ie支持，别的都不支持）
cursor:pointer;（都支持）
cursor:help,wait

五，IE6的兼容

双边距问题

给float的元素写display:inline;

默认高的问题

设置font-size：0；或者 overflow：hidden；

百分百bug

两个float:left;的50%相加，大于100%。会换行

给在右边的div添加clear:right

透明度

Filter:alpha(opacity=value)值0-100
opactity：value值0-1

filter解决方法

关键字 ！important
下划线 _height(只有ie6支持)
星号 *height( ie6 ie7支持)
反斜杠 \9 height：100px\9 （ie支持）

css3的兼容

兼容前缀

-webkit-苹果谷歌
-moz-火狐
-ms-IE
-o-欧朋

1px的边框在手机会显示2px

解决：缩放 背景图片（背景图片尺寸）
transform:scaleY(0.5)