一些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]-->

一些css兼容问题

标签：

原文地址：http://www.cnblogs.com/yyan/p/4824305.html