兼容IE6、IE7、FF的小技巧

 

    原来做站的时候，只想到IE和FF的兼容问题，通过今天帮一个朋友解决导航栏按钮问题，发现了IE6和IE7对DIV+CSS的解析能力还有着比较大的区别。

    比如这个条件：
    margin:3px 3px 0px 3px;
    display:block;

    想必大家一看就知道是什么意思了，但通过测试，IE6和IE7浏览器，表现得就有区别。IE6表现得就很松散，似乎不止3px的左右距离而变成了双倍距离，即6px；而IE7下，基本正常。

    后来在网上学习了一下，将display:block;这个条件变成了display:inline;后，IE6正常了，不再出现那么大的距离，而且比较准确；但IE7又不正常了，似乎右边的距离变小（几乎没有），左边的距离正常。

    继续在网上学习，之后加进了一些条件，将css里的条件改成这样：
    *margin:3px 8px 0px 3px !important;  /***适合IE7.0***/
    *margin:3px 3px 0px 3px;                /****适合IE6.0***/
      margin:3px 8px 0px 3px;                  /*****适合FF*****/
    *display:block !important;
    *display:inline;
      display:block;

    为什么这样做呢？原因如下：
    IE7.0 兼容任何条件，既能识别*号，也能识别 !important ；
    IE6.0 能识别*号，但不能识别 !important ；
    FF(火狐）能识别 !important ，但不能识别*号。

    那这样一来，如果对方用的FF，那就只能识别margin:3px 8px 0px 3px;  而不能识别上面的两个条件了。

    如果对方用的IE6.0  ，那第一个条件不能满足，只能优先识别第二个条件：*margin:3px 3px 0px 3px; 

    如果对方用的IE7.0，那首先第一个条件就满足了，优先考虑：  *margin:3px 8px 0px 3px !important; 

    哈哈，IE6和IE7终于都给摆平了！