一些css兼容问题

由于各浏览器的不同，会存在一些兼容问题，特别是兼容IE6/7/8

下面简单介绍了一些解决方法，更多问题可以访问 W3help.org来查看。

可以通过js获取浏览器版本

document.body.innerHTML=navigator.userAgent

---
一些css兼容性问题
----

1、reset技术如：

*{
       margin:0;
       padding:0;
   }
    //过于粗暴，不建议使用

2.CSS优先级:通过权重值

a.！important优先级最高 a=1 b,c,d=0

b.！imporant>id>伪类、class>元素、伪元素

id：b=1 a,c,d=0
       伪类、class:c=1 a,b,d=0
       元素、伪元素:a,b,c=0 d=1;
        *为0

c.权重值越高优先级越高

3.CSS Hack技术 (打补丁、不能滥用),主要针对浏览器解析不同，不认识的属性会忽略它，利用它可以解决部分兼容问题。

1.IE6:属性前面加“_”。(只有IE6认识)
2.IE7:属性值后面加“*，+,>,<”。(“*，+,>,<” IE6、IE7都认识)。
3.IE8:属性值后面加“*\0”。(IE8认识\0和\9)。

4.IE6中浮动第一个出现双倍margin。

解决：_display：inline；

5.IE6,IE7高度塌陷

hasLayout(是否为布局标签)值为true或者false

解决：zoom放大缩小，触发IE6,IE7中的hasLayout为true
(*zoom:1;)

非IE父元素跟随子元素移动解决：加边框、overflow 、padding

6.图片默认间距

解决： float

7.IE6不支持min-height。

解决：_height/height:auto !important;

不支持min-width

//CSS表达式（尽量不用，要用就在IE6中）

_width:expression
(documentElement.clientWidth<500?"500px":"auto");

8.通过条件注释

巴特西