IE六display:none 三像素bug

本文介绍了一个在IE6浏览器中遇到的三像素Bug问题,该问题导致内容区域右侧的绿色线条出现换行现象。通过调整最后一个div的margin-right属性为-3px解决了这一难题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前几天在项目中有个选项卡,采用display:none属性进行切换。

[img]/upload/attachment/139551/dc620293-c4ff-30a4-8ab5-afaa83a33282.jpg[/img]

内容区的css结构分为左、中、右三列,绿色显示的是带圆角的三像素垂直线条,蓝色区域是正文,红色区域是灰色背景。

为了方便说明问题,将代码结构精简为:

<div style="width:230px; margin:20px; border:2px solid #000; overflow:hidden; zoom:1;">
<div style="background:green; width:3px; float:left; height:300px;"></div>
<div style="background:blue; float:left; height:300px; width:224px;"></div>
<div style="display: none; "></div>
<div style="background:green; width:3px; float:left; height:300px;"></div>
</div>


IE六三像素bug下的显示:
[img]/upload/attachment/139557/7762e23f-3033-3868-a208-75742079ae28.jpg[/img]

其余浏览器正常

问题:在总体宽度正确情况下右边绿色的线条换行了,如果去掉{<div style="display: none; "></div> }这个隐藏容器的话是没有问题滴。

那么我们如何解决呢?display:none的属性它是不占物理空间的。当时候我和同事的想法就是将隐藏容器的宽度、高度、行高设为0,经test没有效果,写IE6的hack也没用,把右侧3像素浮动方向改变也没用……试了好多方法没用。

经奋战,将最后一个div加一个margin-right:-3px

<div style="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">
<div style="background:green; width:10px; float:left; height:300px;"></div>
<div style="background:red; float:left; height:300px; width:280px;"></div>
<div style="display: none; "></div>
<div style="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div>
</div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值