【CSS】浏览器兼容常见BUG

一、概述

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

注意：使用Hack带来的一些副作用 ：

1. 降低了CSS代码的可读性，增加了代码的负担。

一、IE过滤器

1. _下划线过滤器：
   语法：选择符{_属性：属性值；}
   作用：ie6及更低版本才能识别
2. • 属性过滤器：
     语法：选择符{ * 属性：属性值；}
     作用：ie7及更低版本才能识别
3. \9：
   语法：选择符{ 属性：属性值\9；}
   作用：ie浏览器版本才能识别
4. \0：
   语法：选择符{ 属性：属性值\0；}
   作用：ie7及更低版本不能识别
5. ！important最高权重关键字过滤器：
   语法：选择符{ 属性：属性值 important；}
   作用：ie6及更低版本不识别

二、浏览器前缀的简介及应用

某些CSS3属性还只是最新版的预览版，并未发布成最终的正式版，而大部分浏览器已经为这些属性提供了支持，但这些属性是小部分浏览器专有的；有些时候，有些浏览器为了扩展某方面的功能，它们会选择新增的一些CSS属性，这些自行扩展的CSS属性也是浏览器专属的。为了让这些浏览器识别这些专属属性，CSS规范允许在CSS属性前增加各自的浏览器前缀。

三、IE6常见BUG解决

图片有边框BUG

• 当图片加在IE上会出现边框
• Hack:给图片加border:0;或者border:0 none;

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

• vertical-align:top;display:block;

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

• 当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
• hack:给浮动元素添加声明：display:inline

默认高度（IE6、IE7）

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

表单元素行高对齐不一致

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

百分比bug

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

透明属性 兼容其他浏览器写法

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

li列表的BUG

1. ：当父元素(li) 有float:left;子元素(a) 没设置浮动的情况下会出现垂直bug； Hack:给父元素li和子元素a都设置浮动；

2. ：当给li中的a转成block；并且有height,并有float的，li中没设置浮动会出现阶梯显示，hack：同时给li加float;

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