浏览器兼容问题

五大浏览器内核代表作品

1、Trident:IE,遨游、世界之窗、360
2、Gecko：FireFox
3、Webkit:Safari、Chrome
4、Presto:Opera
5、Blink
这里只简单提一下，有兴趣的同学，可以自行google。

浏览器兼容问题

1、图片间隙

描述：当img自动撑开时。由于img标签是行内元素，所以他保持着有和文本的基线对齐，所有会有下面的空隙。

hack：把img变为块元素

2、双倍浮动（双倍间距）

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

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

3、默认高度（IE6）

描述：在IE6及以下版本下，部分块元素拥有默认高度（低于18px高度）

hack：给元素添加声明：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%的情况。

hack1：给右面的浮动元素添加声明：clear:right;

7、鼠标指针bug

描述：cursor属性的hand属性值只有IE浏览器识别，其他浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其他内核浏览器都识别该声明。

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

8、透明属性

IE浏览器写法：filter:alpha(opacity=value);取值范围1-100
兼容其他浏览器写法：opacity：value;(value的取值范围0-1，0.1，0.2…0.9)

过滤器（filter）

1、下划线属性过滤器

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

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

2、!important关键字过滤器

它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个BUG作为过滤器来兼容IE6和其他标准浏览器。

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

3、*属性过滤器

当在一个属性前面增加*后，该属性只能被IE7浏览器识别，其他浏览器忽略该属性的作用。

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