在IE6中使用了float浮动元素导致margin产生双边距的解决方法

admin

发表文章数:3203

使用CSS+DIV制作网页的时候,由于目前浏览器太多,每个浏览器都有不同的CSS的BUG问题,其中IE浏览器特别多,加上用户总坚持着老版本不放,也加重了网页设计师的麻烦。float浮动之后margin产生双边距便是IE6中很明显的BUG。

什么是双边距?

先看以下CSS代码:

#neirong{float:left;width:250px;height:250px;margin:10px;}

表示宽高为250像素的DIV左浮动,上右下左的边距margin为10像素。在其它浏览器中会如实显示,但在IE6中,左边距会变成20像素。这便是双边距。

产生的条件。

对于IE6下的双边距bug我们需要知道的是并不是所有的margin边距方向都会产生双边距,出现双边距的条件是当float浮动元素的浮动方向和margin边距的方向一致时才会出现。如上面的例子,元素向左浮动,而其中只有左边距才产生了双边距。此外,同一行中如果有多个浮动元素,只有第一个浮动元素会出现双边距bug,其它的浮动元素则不会。

如CSS样式如下:

#neirong{float:left;width:250px;height:250px;margin:10px;}
#neirong2{float:left;width:250px;height:250px;margin:10px;}
#neirong3{float:left;width:250px;height:250px;margin:10px;}

其中只有id=”neirong”才会产生双边距。

IE6双边距bug解决方法:

解决方法很简单,只需要给第一个浮动元素的css属性加上display:inline;属性就可以了。

#neirong{float:left;width:250px;height:250px;margin:10px;display:inline;}

未经允许不得转载:作者:admin, 转载或复制请以 超链接形式 并注明出处 夜河资源网
原文地址:《在IE6中使用了float浮动元素导致margin产生双边距的解决方法》 发布于2019-04-19

分享到:
赞(0) 打赏

评论 抢沙发

9 + 9 =


撰写不易~如果您觉得文章对您有帮助的话可以打赏我哦~谢谢亲亲~

支付宝扫一扫打赏

微信扫一扫打赏

外服网游加速器破解版
包含腾讯网游加速器、海豚网游加速器等八款知名加速器,可加速外服游戏,永久包售后包更新,不定时添加新款破解版加速器!
切换注册

登录

忘记密码 ?

切换登录

注册