浏览器兼容问题

浏览器兼容问题

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

CSS Bug、CSS Hack和Filter

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

1)、图片有边框BUG
当图片加在IE上会出现边框
Hack:给图片加border:0;或者border:0 none;

2)、图片间隙
给div盒子里面嵌套img标签会产生3~6像素的间隙

3)、双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline

4)、默认高度（IE6、IE7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px-20像素左右；）
hack1:给元素添加声明：font-size:0;
hack2:overflow:hidden;

5)、表单元素行高对齐不一致
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;

6)、百分比bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。 （也会受系统影响）
hack: 给右面的浮动元素添加声明：clear:right; 意思：清除右浮动。 clear:left:清除左浮动 clear:both:清除两边的浮动

7)、透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1; 例：opacity:0.5; )
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)

8)、li列表的BUG
1）：当父元素(li) 有float:left;子元素(a) 没设置浮动的情况下会出现垂直bug；
Hack:给父元素li和子元素a都设置浮动；
2）：当给li中的a转成block；并且有height,并有float的，li中没设置浮动会出现阶梯显示，
hack：同时给li加float;

9)、当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上
hack:1、给父级元素添加overflow:hidden;(推荐使用)
hack：2、给父元素或者子元素加浮动

扩展：cursor属性

auto默认
crosshair加号
text文本
wait等待
help帮助
progress过程
inherit继承
move移动
ne-resize向上或向右移动
pointer手形