前几天在项目中有个选项卡，采用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>
