`
rainwang
  • 浏览: 14528 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

IE六display:none 三像素bug

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



内容区的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下的显示:


其余浏览器正常

问题:在总体宽度正确情况下右边绿色的线条换行了,如果去掉{<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>

  • 大小: 97 KB
  • 大小: 5 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics