ie6下display:none的BUG

display:none引起的3像素的BUG,如果你也有解决方案,欢迎分享。

今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug。

看代码:


  1. <div style="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">   
  2. <div style="background:green; width:10px; float:left; height:300px;"></div>   
  3. <div style="background:red; float:left; height:300px; width:280px;"></div>   
  4. <div style="display: none; "></div>   
  5. <div style="background:green; width:10px; float:left; height:300px;"></div>   
  6. </div> 

这个是有在ie6下如图


 

其他浏览器如图:

这个问题真是让人郁闷,感谢greengnn和广州♂锋提供的解决方案:

解决方案1:将最后一个div加一个margin-right:-3px;即


  1. <div style="width:300px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">   
  2. <div style="background:green; width:10px; float:left; height:300px;"></div>   
  3. <div style="background:red; float:left; height:300px; width:280px;"></div>   
  4. <div style="display: none; "></div>   
  5. <div style="background:green; width:10px; float:left; height:300px;margin-right:-3px"></div>  

解决方案2:将display: none的div换一个形式隐藏:即
 


  1. <div style="width:100px; margin:20px; border:1px solid #000; overflow:hidden; zoom:1;">   
  2. <div style="background:green; width:10px; float:left; height:100px;"></div>   
  3. <div style="background:red; float:left; height:100px; width:80px;"></div>   
  4. <div style="position:absolute; visibility: hidden "></div>   
  5. <div style="background:green; width:10px; float:left; height:100px; margin-right:-3px"></div>   
  6. </div> 

如果你也有解决方案,欢迎分享。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索display
, 解决方案
, 像素
, display:none
, 广州
, 一个
none
,以便于您获取更多的相关知识。

时间: 2024-09-08 10:38:47

ie6下display:none的BUG的相关文章

IE6下frameset横向滚动条BUG

IE6下frameset横向滚动条BUG 如果想要解决这个问题, 你需要选择一个最适合自己的解决方案. 方案 1: 在CSS定义中粘贴下面的代码: html { overflow-y: scroll; } 这会强制默认出现垂直滚动条, 这样一来, 从某些理由上来讲, 便消去了IE对水平滚动条的需求. 优点: 完全解决了这个问题, 允许你保持完整的XHTML doctype. 缺点: 即使不需要垂直滚动条的时候也强制其出现. 请注意, 不要把它放在关联其它页面的CSS中, 比如说, 框架的inde

IE6下float出错误解决办法

margin 和 padding 只是一个间接原因,如果没有内外边距,可能外层 div 刚好可以容纳内部的 float. 加上边距后,每个 float 占用的空间就变大了,首先带来的问题是 div 的宽度不够,那么,愚蠢的 IE6 就会产生莫名其妙的问题,反映给用户的现象就是出现鬼影. 解决方案一: 准确计算内部 float 元素加在一起占用的宽高,确保外层 div 在 css 中明确指定了具体的 width 和 height 像素值,问题不会再出现. 其它解决方案 给浮动的div加上两个语句 

IE6下使用滤镜后链接无法点击的BUG

有个div的背景是个png的图片,在IE6下使用滤镜使它透明,但它下面的a标签的hover效果就没法显示,且链接也无法点击. 通常的解决方法是:给a标签加个相对定位(position:relative;),但在这里我在a标签上有个绝对定位(position:absolute;),这样的话该怎么解决的呢? 办法有两种:1.在使用滤镜的容器外面再加上一个容器,这个容器加上绝对定位.a标签上加相对定位的属性(position:relative)就可以点击了. 2.使用IE6下PNG图片透明插件DD_b

解决ie7下display: inline-block失效的BUG

  方法一 .ie7 {     display: inline-block;     *zoom: 1;     *display: inline; } 后来又看到一方法 #id{display:inline-block;} #id{display:inline;} 注意:一定要分开写,如果写在同一个选择器里是不起作用的,这是IE的一个bug. 在IE下,display:inline-block只是触发了元素的layout.比如将display:inline-block给到div上,只能保证这

!important在ie6下的一个BUG和CSS的优先级。

在没有DTD的声明的情况下,在同一个选择器样式(即同一个大括号里面)下,IE6,IE7,IE8对!important的解析都是无效的. 一 css的优先级 今天有人跟我说css hack中用!important来区分ie6,因为ie6不支持!important,是的在很早以前我也是用过这种方法写hack,但是后来就基本不用了.本来我对他谁的ie6不支持!important也没什么异议,可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题,而且是支持ie6的,这是为什么呢

一个 utf-8 网页在 IE6下的BUG

网页 一个 utf-8 网页在 IE6 下的BUG 自己测试的,不一定100%准确,仅供参考. 触发条件:1. title标签里的内容为中文其他双字节字符2. 指定网页编码的 meta 信息在 title 标签的下方,即 <title>中文或其他双字节字符title</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3. 另存或

IE6下DIV高度显示的Bug收藏

IE6下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高.所以即使你用 height: 6px; 来定义了一个 div 的高度,实际在 IE 下显示的仍然是一个 12 px 左右高度的层. 要解决这个问题,可以强制定义该 div 的字体尺寸,或者定义 overflow 属性来限制 div 高度的自动调整.比如 <div style="height: 6px; font: 0px Ari

IE6下图片下方有空间距的多种解决方法

在测试网页布局过程中会发现IE6下图片下方有空,本文整理了一些常用的解决方法,有类似问题的朋友可以根据自己的情况适当选择,希望对大家有所帮助   解决这个BUG的方法也有很多: •可以是改变html的排版: •或者定义img 为 display:block: •或者定义vertical-align属性值为vertical-align:top | bottom |middle |text-bottom: •还可以设置父容器的字体大小为零 font-size:0;.

【原】如何实现IE6下块级元素的内容自动收缩

近期在做提示层组件的开发,遇到了一个IE6常见的bug....想出了几个解决的办法,挺有意思的,这里分享给大家. 由于IE6浏览器中,display:inline-block只能触发IE的haslayout属性使得元素具有布局属性,当对div元素使用display:inline-block,div元素仍然为块状布局而占据一行. 那么如何在IE6下使得块级元素的内容自动收缩呢?开发圆角小提示层模块,让它来解答这个问题. 结构和样式: /** * @name : prompt * @explain