Div+Css兼容Ie和Firefox
最近在写一个Div+Css布局的网站首页，以前写的页面都统一width:900px;不存在什么布局呀 什么float的设置。现在没办法呀！要对页面进行切割，分块。幸好，有点css的基础，不过用起来就比较郁闷了。在ie和firefox下，相同的属性值往往会有不同的显示效果。没办法 要兼容浏览器 只得一个一个bug去找。但完全兼容浏览器是无法做到的，所以也只能将个大概的效果展示出来，不要偏差太大太明显就行。
首先，需要提出的是float这个浮动属性，这是div+css布局的关键所在。float:left;float:right;是常用的浮动属性。为了使div能在一行排列，不得补用到它们。呵呵！不就是个float吗？这有什么好提的，要浮动我就float一下呀。哎！话是这么说，但真正用到时却出问题了。在ie下，只要前一个div有float:left;后面的div宽度不超过（总body的宽度）-（前一个div的宽度），后面的div就自动浮动，并排列在同一行。ie和firefox下，这点效果是一样。好，接着往下，下一行也这样布局，就分两栏吧。
<style type="text/css">
#div1{width:200px;height:80px;float:left;border:1px solid blue;}
#div2{width:600px;height:80px;border:1px solid blue;}
</style>
<div>
<div id="div1"></div>
<div id="div2"></div>
</div>
<div style="clear:both;margin-top:20px;" id="div3">
</div>
这样的布局，在ie下和火狐下的显示效果就不同了 在firefox下的margin-top:20px;没效果。。。。
在ie下div3的margin-top有效果，而在firefox下却没效果。为什么？翻来覆去的想，终究没有想明白。没办法了，后来我有改css.偶然，给div2加上了float:left属性，然后margin-top:20px都有效果了。郁闷吧 呵呵 不过还是没弄明白为什么会这样，问题解决了就ok了！
下一个问题是ul的问题。在ie下和firefox下注意了 ul{margin-left:10px;}的效果是不同的，这样设置的效果才会相同
ul{padding:0;margin-left:10px;}在火狐下默认的padding!=0所以需要这样来设置下 ...
呵呵 愚昧的个人见解!
首先，需要提出的是float这个浮动属性，这是div+css布局的关键所在。float:left;float:right;是常用的浮动属性。为了使div能在一行排列，不得补用到它们。呵呵！不就是个float吗？这有什么好提的，要浮动我就float一下呀。哎！话是这么说，但真正用到时却出问题了。在ie下，只要前一个div有float:left;后面的div宽度不超过（总body的宽度）-（前一个div的宽度），后面的div就自动浮动，并排列在同一行。ie和firefox下，这点效果是一样。好，接着往下，下一行也这样布局，就分两栏吧。
<style type="text/css">
#div1{width:200px;height:80px;float:left;border:1px solid blue;}
#div1#div2{width:600px;height:80px;border:1px solid blue;}</style><div><div id="div1"></div><div id="div2"></div></div><div style="clear:both;margin-top:20px;" id="div3"></div>这样的布局，在ie下和火狐下的显示效果就不同了 在firefox下的margin-top:20px;没效果。。。。
在ie下div3的margin-top有效果，而在firefox下却没效果。为什么？翻来覆去的想，终究没有想明白。没办法了，后来我有改css.偶然，给div2加上了float:left属性，然后margin-top:20px都有效果了。郁闷吧 呵呵 不过还是没弄明白为什么会这样，问题解决了就ok了！
下一个问题是ul的问题。在ie下和firefox下注意了 ul{margin-left:10px;}的效果是不同的，这样设置的效果才会相同
ul{padding:0;margin-left:10px;}在火狐下默认的padding!=0所以需要这样来设置下 ...
呵呵 愚昧的个人见解!
