前几天在项目中有个选项卡,采用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
分享到:
相关推荐
js获取可见元素的尺寸还是比较方便的,这个可以直接使用这个方法: 代码如下:function ...}但是如果这个元素是隐藏(display:none)的,尺寸又是未知自适应的,哪有上面的方法就不行了!因为display:none的元素是没有物理
visiblity:hidden和display:none属性之间的差异
设置display:none后不能通过设置display:“”显示得要用block或者inline。
IE 7 下, 先隐藏 父元素,后隐藏子元素,再显示父元素, 被隐藏的子元素 重叠区域下面, 存在另一个可见的元素, 则该 display:none的子元素出现BUG: 背景和图片(img元素,不仅仅是图片背景)仍然显示, 但文字不...
display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none —不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见...
前言: 在使用css隐藏栏位或物件的时候, 常常会使用到display:none和visibility:hidden这两个属性, 但却很容易分不清楚这两个的差别, 或是乾脆同时使用两种属性,来确保物件一定被隐藏, 其实我们可以很简单的来...
web页面前台编码时经常用到display:none样式,平常使用时发现有几点特征需要注意
在css测试中遇到一个ie9的bug:用js设置tr元素的样式为display:none 会引起ie崩溃,很是郁闷,于是网上搜罗一下终于找到了解决方法,晒出来与大家分享,感兴趣的你可不要错过了哈
本以为通过display:none即可实现,结果发现在option元素上使用display:none在firefox中有效,在IE6、IE7、IE8中都无效。 所以,通过javascript设置display:none也是在IE中无效,代码如下: it works……...
javascript获取隐藏元素(display-none)的高度和宽度的方法.docx
display:none在IE、火狐、Chrome等主流浏览器中的一些问题想必大家也有碰到过吧,接下来为大家详细图文介绍下,感兴趣的朋友可以参考下哈希望可以帮助到你
display: flex弹性布局
<div class="content" style="display:none"> 这里是一的内容 <div class="content" style="display:none"> 这里是二的内容 <div class="content" style="display:none"> 这里是三的...
在IE6和IE7中这个版本的IE流量器中,对display:inline-block属性支持不佳,这也是一个经典的BUG。 有两种方式解决这个问题,让IE6/IE7 支持 display:inline-block 的方法。 复制代码代码如下:<ul> <li></li> <li></...
还有一种方法就是设置li为display:inline;这样可以达到同样的效果,但是问题是inline元素的特性:默认无法设置宽度,高度,以及上下margin,(关于padding,情况有点特殊,在ie6,7中 inline元素是无法设置上下...