IE6、IE7与Firefox、Safari的CSS兼容小结

1.   padding & margin

padding 时，IE & Firefox 一样，div 的大小会增加，div 对应的位置增加padding 对应位置的值。

Margin 时，IE6 、IE7 以 div 的父级容器为基准进行margin 的，Firefox 、Safari 以body 为基准进行margin 的( 即使margin 的div 不是body 的直接子元素) 。

建议：设计页面样式时，尽量少用margin 。

2.    IE6 div 解析误差

对于height<20 的div ，IE6 解析一律为Height=20 的div ，其他的浏览器解析正确。

建议

3.    ul 、li 解析差别

ul ： IE6 、 IE7 为： margin :   auto auto auto 30pt ; （注意是 pt 不是 px ）

Firefox 、 Safari 为： margin :   1em 0px 1em 0px ;

li:  IE6 、 IE7 为： display: block;

Firefox 、 Safari 为： display: list-item ;



4.    字体大小设置px 与em 的区别

IE 无法调整那些使用 px 作为单位的字体大小；

Firefox 能够调整 px 和 em 。

解释：

1)        em 指字体高，任意浏览器的默认字体高都是 16px 。所以未经调整的浏览器都符合 : 1em=16px 。

2)        为了简化 font-size 的换算，在 css 的 body 中声明 Font-size=62.5% ，如此 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 即只需要将原来的 px 数值除以 10 ，然后换上 em 作为单位就行了

3)        em 的值并不是固定的；

4)        em 会继承父级元素的字体大小。比如你在 content 的 div 中设置 font-size=1.2em ，即 12px 然后在 content p 选择器中设置 font-size=1.2em ，此时 p 的字体大小不再是 12px ，而是 1.2*12=14.4px ，所以 p 中 font-size=1em 才是正确的。

5)        相对长度单位（随着分辨率的变化而变化），如 px, em 等
6)        绝对长度单位（不随显示器分辨率变化，但是 IE6 中还是会变化），如 pt,mm 等




5.      p 标签解析差别

Firefox 、 Safari ： margin :   1em 0px ; display: block;height:20px;

IE6 、 IE7 中： display: block

6.      cursor 的不同

pointer 可以同时在 IE 、 FF 、 Safari 中显示游标手指状， hand 仅 IE 可以　

7.      对 float:left; margin-left:10px; （加上 float 之后， ie 6margin 加倍）

IE6 解析出来为： float:left; margin-left:20px;

其他3 个正常。



8.      float 的 div 一定要闭合

  如下代码：

<div id="floatA" style ="float:left; " >

<div id="floatB" style ="float:left; " ><div class="clear">// 后来加的，ff 上必须

<div id="NOTfloatC" >

9.      不同浏览器页面的缩放（ IE 、 Safari 支持 zoom ，

Firefox 支持 MozTransform & MozTransformOrigin ） ，JavaScript 如下：

function bodyZoom()

{

    if (screen.width==1024 & screen.height==768)

    {

       if ($.browser.msie||$.browser.safari)

         {

            document.body.style.zoom=1;

        }

         if ($.browser.mozilla)

        {

              document.body.style.MozTransform= 'scale(1,1)' ;

        }

    }

    if (screen.width==1280 & screen.height==1024)

    {

        if ($.browser.msie)

        {

            document.body.style.zoom=1+28/100;

        }

         if ($.browser.safari)

        {

            document.body.style.zoom=1+28/100;

        }

        if ($.browser.mozilla)

        {

               document.body.style.MozTransform= 'scale(1.28,1.28)' ;

              document.body.style.MozTransformOrigin='48% 0%' ;

        }

    }