div css在IE和firefox上的兼容问题

发布网友 发布时间：2022-04-21 00:38

我来回答

共5个回答

懂视网 时间：2022-05-13 00:16

最近在写一个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;}

< div >
< div id ="div1" >
< div id ="div2" >

< div style ="clear:both;margin-top:20px;" id ="div3" >

这样的布局，在 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所以需要这样来设置下 ...
呵呵 愚昧的个人见解!

热心网友 时间：2022-05-12 21:24

在下面加一行代码清除浮动 <div style="clear: both;"></div>
这是IE 浏览器特有的投影的一个属性。

热心网友 时间：2022-05-12 22:42

　　您好！很高兴为您答疑。
　　从您图片中显示效果推测，这是因为在不同浏览器下样式兼容差异造成的视觉效果。一般情况下，如果您需要将包裹对象的元素（table/div）与对象拉开距离，比较有效的办法是为对象定义padding属性，然后根据实际需要调整四个方向的值即可。
　　如果对我们的回答存在任何疑问，欢迎继续问询。

热心网友 时间：2022-05-13 00:17

如果没错的话，这肯定是一张图片，在不同的浏览器中图片与下面的边框的间隙不同，设置方法：给img加float:left或者是加display:block，总之想办法把img转化为块级元素就可以了。这个我之前碰到过，这样改，肯定没错。

热心网友 时间：2022-05-13 02:08

*宽度，*好margin 和padding 一般就没问题了