CSS浏览器兼容问题

五大浏览器内核代表作品

Trident：IE、Maxthon（遨游）、Theworld世界之窗、360浏览器

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

Webkit：代表作品 Safari、Chrome，是一个开源项目

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

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

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

由于各大主流浏览器由不同的厂家开发，所用的核心架构和代码
也很难重合，这就是为各种莫名其妙的Bug（代码错误）提供了温床，
再加上各大厂商出于自身利益考虑而设置的种种技术壁垒，都让
CSS应用起来比想象的要麻烦。浏览器的兼容问题是我们必须去克服的

CSS Bug、CSS Hack和Filter

CSS Bug：css样式在个浏览器解析不一致的情况，或者说css
样式在浏览器中不能正确显示的问题成为css bug。

CSS Hack：css中，Hack是指一种兼容css在不同浏览器中正确显示
的技巧方法，因为他们都属于个人对css代码的非官方的修改或
非官方的补丁。有些人更喜欢使用patch（补丁）来描述这种行为

Filter：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或
隐藏规则或声明的方法。本质上讲，Filter是一种用来过滤不同浏览器的
Hack类型。

IE6常见的css解析bug及hack

1、图片间隙

div中的图片间隙（该bug出现在ie6以及更低版本中）
描述：在div中插入图片时，图片会将div下方撑大三像素

hack1：将div与 img 写在一行上。

hack2：将img 转为块状元素，给img 添加声明 display：block；

2.双倍浮向（双倍边距）
描述：当ie6及更低版本浏览器在解析浮动元素时，会错误地吧浮向
边界加倍显示。
hack：给浮动元素添加声明：display：inline；

3.默认高度（ie6）
描述：在IE6及以下版本中，部分块元素拥有默认高度
（低于18px高度）
hack1：给元素添加声明：font-size：0（不能加文字，加文字了会有影响）
hack2：给元素添加声明：overflow：hidden（推荐使用）

4、表单元素行高不一致（IE,MOZ,C,O,S）
描述：表单元素行高对齐方式不一致
hack：给表单元素添加声明：float：left

5、按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack1：统一大小/（用a标记模拟）
hack2：在input上写按钮的样式，一定要把input的边框去掉
hack3：如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

6、百分比bug
描述：在IE6及以下版本中解析百分比时，会按四舍五入方式计算从而
导致50%加50%大于100%的情况
hack：给右面的浮动元素添加声明：clear：right；

7、鼠标指针bug
描述：cursor属性的hand属性值只有ie浏览器识别，其他浏览器不会识别该声明，
cursor属性的pointer属性值ie6.0以上版本及其他内核浏览器都识别该声明。
hack：如统一某元素鼠标指针形状为手型，应添加声明：
cursor：pointer

8、透明属性
ie浏览器写法：filter：alpha（opacity=value）取值范围1-100
兼容其他浏览器写法：poacity：value；（value的取值范围0-1,0.1,0.2~0.9）

9.过滤器（filter）
1、下划线属性过滤器
当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有
下划线的属性而忽略了这个声明，但是在id6及更低的版本浏览器中会继续
解析这个规则。

语法：选择符{_属性：属性值；}

2、！important关键字过滤器
它表示所附加的声明具有最高优先级的意思，但由于id6及更低的版本不能识别它，
我们可以利用ie6的这个bug作为过滤器来兼容ie6和其他浏览器。

语法：选择器{属性：属性值！important}

3、属性过滤器
当在一个属性前面加了后，该属性只能别ie7浏览器识别，其他浏览器混略该
属性的作用。

语法：选择器{*属性：属性值；}