div+css页面ie与ff浏览器兼容方法(原创)

猿代码 · 2006-08-02 · 590 人浏览

在ff测试div+css的过程中发现不少问题,主要原因是代码的不规范书写。
通过一步步修改新闻网代码,总结出一些标准,帮助很大——至少以前不知道,现在明白了...
下面通过ie和ff的对比总结一下(谨属个人意见):
1.div里的内容,ie默认为居中,而ff默认为左对齐。使ff内容居中的方法是增加代码margin:auto;
2.设有两横行div排列,上面的div控制高度(height),如果div里的实际内容大于控制高度,在ff中会出现两个div重叠的现象;在ie中,下面的div会自动给上面的div让出空间。所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节。
3.给出一个框架代码:

<div id="header"></div>
<div id="mainbox">
    <div id="menu"></div>
    <div id="sidebar"></div>
    <div id="content"></div>
</div>
<div id="footer"></div>

#mainbox的背景颜色控制通常会在ff中失效。解决方法是再嵌套一个div,在新加的div中写入背景颜色代码,试试看背景就会出现了。(网上也有一种办法是直接在body背景中添加颜色,但是如果遇到body背景和页面背景不同的时候就不好说了)
4.在用作外部容器时,margin属性会在ff中失效。(好像在这几条中,一旦div用作外部容器,就有好多功能失效。)此条解决方法同第3项。
5.拿footer为例,有时候如果上面使用了float控制的n列的布局,那么在用ff浏览时footer很有可能不老实,到处乱动——因为他还在受到浮动(float)的控制。如果想让它老老实实呆在页面下方,在footer的div中写入 clear:both; 就可以达到效果了!

上面肯定有错误,请高手们批评指正!

css div firefox
  1. 啊啊啊 2006-08-28

    问一下高手,margin 和padding值 是否占用整个块的宽和高
    比如: #main {width: 100px; padding:10px; height: 300px; margin: 5px 0px;}
    引用这个样式的div 在浏览器中实际占用的宽高到底是多少呢? 不同浏览器是否有差别?

    1. 小胖 (作者)  2006-08-28
      @啊啊啊

      俺可不是什么高手~
      在FF中设置padding后, div会增加height和width,但 IE 不会。你上面的例子用ff浏览时div会在左右多占据10px的宽度。
      margin则是IE5和IE6的解释的不同。IE5下div的高度为300px-5px(上)-5px(下),最终div的高度为290px;而IE6和其他浏览器上高度则是300px+5px(上)+5px(下)=310px。
      个人意见,如有不同意见请指正!

京ICP备2023019113号-1 ◎ Theme by Jasmine