一些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.通过条件注释

<!--[if lte IE 6]>
    这段内容只显示在版本小于等于IE6的
    <![endif]-->