常用的兼容性问题

一、用float属性的div布局问题

有三个div，想让前两个div在同一行，第三个与前两个不在同一行，而是在他们的下面，该怎么做？答：给第三个div的style加上clear：both即可。

    <style type="text/css">
        #content
        {
            float:left;
            background:red;
            width:100px;
            height:200px;
        }
        #nav
        {
            float:left;
            background:green;
            width:200px;
            height:200px;
        }
        #navbar
        {
            background-color:Black;
            height:200px;
            clear:both;
        }
    </style>

    <div id="content">
    </div>
    <div id="nav">
    </div>
    <div id="navbar">
    </div>

 

二、用float属性时margin属性加倍的问题。— —这个可能不常用。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;属性即可;
例如：

<#divid="add_float"></#div> 

相应的css为：

#add_float{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/

}

 

三、关于容器的包含关系

很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。所以要设置好div的宽度。

 

四、关于高度的问题

如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。

 

五、