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

看代码:

  <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;"></div>
   
  </div>

这个是有在ie6下如图

其他浏览器如图:

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

解决方案1:将最后一个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>

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

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

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

转载请注明转自《【IE6的疯狂之十二】一个display:none引起的3像素的BUG

【IE6的疯狂之十二】一个display:none引起的3像素的BUG的更多相关文章

  1. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  2. geotrellis使用(十二)再记录一次惨痛的伪BUG调试经历(数据导入以及读取瓦片)

    Geotrellis系列文章链接地址http://www.cnblogs.com/shoufengwei/p/5619419.html 目录 前言 BUG还原 查找BUG 解决方案 总结 后记 一.前 ...

  3. 【IE6的疯狂之二】IE6中PNG Alpha透明(全集)

    ie7,fireofx,opera,及至webkit内核的chrome ,safari….. 这些浏览器均支持png的Alpha透明. 很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG ...

  4. 疯狂JAVA讲义---第十二章:Swing编程(五)进度条和滑动条

    http://blog.csdn.net/terryzero/article/details/3797782 疯狂JAVA讲义---第十二章:Swing编程(五)进度条和滑动条 标签: swing编程 ...

  5. 如何一步一步用DDD设计一个电商网站(十二)—— 提交并生成订单

    阅读目录 前言 解决数据一致性的方案 回到DDD 设计 实现 结语 一.前言 之前的十一篇把用户购买商品并提交订单整个流程上的中间环节都过了一遍.现在来到了这最后一个环节,提交订单.单从业务上看,这个 ...

  6. 如何在Visual Studio 2017中使用C# 7+语法 构建NetCore应用框架之实战篇(二):BitAdminCore框架定位及架构 构建NetCore应用框架之实战篇系列 构建NetCore应用框架之实战篇(一):什么是框架,如何设计一个框架 NetCore入门篇:(十二)在IIS中部署Net Core程序

    如何在Visual Studio 2017中使用C# 7+语法   前言 之前不知看过哪位前辈的博文有点印象C# 7控制台开始支持执行异步方法,然后闲来无事,搞着,搞着没搞出来,然后就写了这篇博文,不 ...

  7. Python 第十二篇:HTML基础

    一:基础知识: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可 ...

  8. 【腾讯Bugly干货分享】腾讯验证码的十二年

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/581301b146dfb1456904df8d Dev Club 是一个交流移动 ...

  9. 【Dev Club 分享】腾讯验证码的十二年

    源:http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=2653578147&idx=3&sn=94a8f8f8b4a23 ...

随机推荐

  1. VIJOS1107 求树的最长链

    vijos1107环游大同80天 学习了一下求树的最长链的方法 最简单的思路就是两次dfs 两次dfs分别有什么用呢? 第一次dfs,求出某个任意的点能到达的最远的点 第二次dfs,从所搜到的最远的点 ...

  2. Internal Server Error

    Internal Server Error 说句实在的话,学习jQuery的路是很艰难的,解决某此问题的历程与浪费时间太多. 那些痛苦就不在此分享了. 在家里的电脑能够实现<使用jQuery的$ ...

  3. MongoDB:利用官方驱动改装为EF代码风格的MongoDB.Repository框架 五 --- 为List<MongoDBRef>增加扩展方法

    本次改动主要内容:为List<MongoDBRef>增加扩展方法 在MongoDB.Repository的使用过程中,发现在一个类中只定义一个List<MongoDBRef>是 ...

  4. 【JS】布尔逻辑

    0 是逻辑的 false 1 是逻辑的 true 空字符串是逻辑的 false null 是逻辑的 false NaN 是逻辑的 false 字符串 'false' 是逻辑的 true Boolean ...

  5. Api 和 Spi

    目录 背景Java类库中的实例如何实现这种结构?备注 背景返回目录 Java 中区分 Api 和 Spi,通俗的讲:Api 和 Spi 都是相对的概念,他们的差别只在语义上,Api 直接被应用开发人员 ...

  6. IOS开发之路二十一(UIWebView加载本地html)

    挺简单不多说的直接代码: // // ViewController.h // JSAndJson // // Created by WildCat on 13-9-8. // Copyright (c ...

  7. Lync Server 2013中央管理存储:自动收集配置数据失败

    Lync Server 2013在安装本地配置存储到配置中央管理存储的本地副本时候提示错如信息:自动收集配置数据失败. 打开Lync Shell,输入Get-CsConfigurationStoreL ...

  8. sql 数据库还原脚本 (kill链接+独占

    在开发过程中经常会碰到数据库还原,要是sql 连接没完全释放掉,那么还原就会受到阻碍.此脚本就是为了解决这个问题. USE [master] GO /****** Object: StoredProc ...

  9. OleDbCommand cmd.Parameters.AddWithValue 添加参数时需要按照存储过程参数的顺序加入

    在使用存储过程时,参数出入的顺序要一致.

  10. PHP curl之爬虫初步

    php的curl可以实现模拟http的各种请求,这也是php做网络爬虫的基础,也多用于接口api的调用. 这个时候有人就要发问了:为什么你特么不用file_get_contents? curl的性能比 ...