浏览器兼容

1. CSS Bug、CSS Hack和Filter

1)  CSS Bug: CSS样式在各浏览器中解析不一致的情况，或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug.

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

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

2. IE6常见CSS解析Bug及hack

2.1图片有边框BUG(ie8及以下)

描述：当图片加<a href=“#”></a>在IE上会出现边框

Hack:给图片加border:0;或者border:0    none;

2.2 图片间隙

描述：在div中插入图片时，图片会将div下方撑大大约三像素。

hack1:将</div>与<img>写在一行上,并将div的字体大小设成0；

hack2:将<img>转为块状元素，给<img>添加声明：display:block;  

2.3 双倍浮向边距（只有IE6出现）

描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。

hack:给浮动元素添加声明：display:inline;

2.4默认高度（IE6、IE7）

描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）

hack1:给元素添加声明：font-size:0;

hack2：给元素添加声明：overflow:hidden;

2.5表单元素行高对齐不一致

描述：表单元素行高对齐方式不一致

hack:给表单元素添加声明：float:left;

2.6按钮元素默认大小不一

描述：各浏览器中按钮元素大小不一致

Hack:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。

 

2.7 百分比bug  

描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。（也会受系统影响）

hack:  给右边的浮动元素添加声明：

      clear:right;   清除右浮动。     

      clear:left:清除左浮动

2.8鼠标指针bug

描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明.

hack: 如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer

 

2.9 透明属性

兼容其他浏览器写法：opacity:value;(value的取值范围0-1;)

IE浏览器写法：filter:alpha(opacity=value);取值范围0-100(整数)

2.10 margin塌陷

描述：父元素与子元素没有设置浮动情况下，设置margin-top后，会错误的把margin-top加在父级元素上

hack1 给父级元素添加overflow:hidden;(推荐使用)

hack2 给父元素或者子元素加浮动

2.11 margin上下 BUG

当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值；

3. 浏览器内核

    <!-- 新属性在没有成为标准属性之前，浏览器要通过私有前缀去使用该属性。 -->

    <!-- 浏览器           内核            私有前缀 -->

    <!-- chrome\safari    webkit            -webkit-

         firefox          gecko               -moz-

         opera            presto              -o-

         ie               trident            -ms-  

         chrome opera     blink-->