目前，浏览器市场主要分为IE6、IE7、IE8、IE9、Firefox、Chrome、Safari以及Opera五大阵营。所以在页面开发中经常会碰到不兼容的问题，这里举出一些问题的解决方法：

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

<#div id=”imfloat”></#div>

相应的css为

#IamFloat{
float:left;
margin:5px;/*IE6下理解为10px*/
display:inline;/*IE6下再理解为5px*/}

二、在CSS中加入overflow:hidden;可以灵活运用，不止防止内容溢出。还可以清除浮动。
例如：<div>
<div>123</div>
<div>456</div>
</div>
样式：
.abc{width:500px; border:1px #000000 solid;}
.b{float:left; width:240px; height:300px; background-color:#CCCCCC; margin-left:10px; display:inline;}
www.hukou51.com网站这段代码在IE里显示是没有问题的，但是在火狐下abc的高度并没有被b的高度撑开，如果给.abc加上overflow:hidden;则可以正常显示。

三、关于页面中的CLASS应用
代码要简洁，尽量多使用标签元素，比如
<div class=”abc”>
<ul>
<li>111111<span>2222</span></li>
</ul>
</div>

这段div中的CSS就可以写成：
.abc{}
.abc ul{}
.abc ul li{}
.abc ul li span{}
页面中有些文件的li和span都加上了class，其实如上述写法会为页面节省一部分代码空间。

四、连续的英文或数字能使容器被撑大，不能根据容器的大小自动换行。解决方法：《css之自动换行》 。连续的标点符号也不会转行，用属性 word-break:break-all; 无法达到效果，可以选用属性 word-wrap: break-word; 来解决！

五、white-space:nowrap; 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

六、CSS hack(浏览器兼容):区分IE6，IE7，firefox(火狐)
区别IE6与FF：
background:orange;*background:blue;

区别IE6与IE7：
background:green !important;background:blue;

区别IE7与FF：
background:orange; *background:green;

区别FF，IE7，IE6：
background:orange;*background:green !important;*background:blue;

#demo div{
width:50px; /* FireFox 有效 */
+width:60px; /* IE 7 有效 */
_width:70px; /* IE 6 有效 */
}

七、解决div在(火狐浏览器)firefox下高度自动适应问题

为BOX加上属性: overflow:hidden

<div id=”Box” style=”width:100%;background-color:green;overflow:hidden ;”>
<div id=”left” style=”float:left;background-color:#333333;width:100px”>左左左左左左左左左左左左左左左左左左左左</div>
<div id=”right” style=”float:left; “>右右</div>
</div>

八、页面中有一些是DIV里再套DIV，其实我们应该注意标签语义化，不能让我们的页面都是一味的DIV嵌套出来。例如，不能将标题放到DIV里，而不去使用H1-H6,页面中的标签：如H1-H6为标题标签，DIV为区隔标记（设定区块的摆放位置），UL LI为无序号的清单列表，OL LI为有序号的清单列表，DL DT DD为定义式清单（页面中的图文列表基本上就用这个标签），<span>为行内元素标签（<div>为大容器，大容器当然可以放一个小容器了,<span>就是小容器。），<em> <i>标签，这两个标签可以用在一段文字或一行文字中突出颜色字的样式，<p>为内容文章标签。

转载请注明：26点的博客 » 常见div css 不兼容的解决方法