IE6的3像素神奇bug:缘起与解决方案
在我们这样一个神奇的国度,到了2014年了,居然还是有很多人的电脑上用着XP,安装的是IE6,他们没有想过要升级,我们就得想着兼容他们。。。。
一、 6爷我喝高了,最后一行有重影。那什么是IE6 的3像素bug?
IE7修正了IE6中的一个bug,bug名字就叫做“3像素bug”,即文字溢出bug. 表现形式是ie6浏览器下文字或者图片溢出,莫名其妙的自动复制几个字符。如下图,就自动溢出了一个“下一页”。
二、3像素bug是怎么产生的?
一个容器A包含2两个具有“float”样式的子容器B和C。
第二个容器C的宽度大于父容器A的宽度,或者父容器A宽度减去第二个容器C宽度的值小于3。
在第二个容器前存在注释(这也是为什么此bug也叫做“IE6注释bug”的原因)。
下面是这段代码再现了bug的产生过程,如果用ie6浏览,则在下面 会多出一个“醉”字。
<div style=”width:200px;”>
<div style=”float:left;”></div>
<div style=”float:left;width:200px;”>我是6爷,我没醉</div>
</div>
三、怎样让6爷快速醒酒?ie 6 3像素bug的最佳解决办法:margin-right:-3px;
关于解决办法网上有很多转载,但是我一一试过之后很多都不奏效或者不理想。下面是一段摘录:
1.改变结构,不出现【一个容器包含2两个具有“float”样式的子容器】的结构。
——此解决方案的评论:疯了!因噎废食的做法。
2.减小第二个容器的宽度,使父容器宽度减去第二个容器宽度的值大于3,例如将本文示例中第二个子容器的宽度改为197px。
——此解决方案的评论:在满足页面布局的前提下可以使用。但是当情况比较复杂的时候,可能实施起来比较困难。
3.去掉所有的注释。
——此解决方案的评论:最直接的做法,但是“没有注释的代码”,的确不是一个好的代码写作习惯。
4.修正注释的写法。将 <!– 这里是注释内容 –>写成<!–[if !IE]>这里是注释内容<![endif]–>
——此解决方案的评论:还不错的解决方案,但是并不是每个人都对<!–[if !IE]>这里是注释内容[endif]–>这种注释写法很欣赏。
5.在第二个容器后面加一个或者多个<div style=”clear”></div>来解决。
——此解决方案的评论:另人感觉很不爽的解决方案。但是的确能解决。影响网页效率
这五种方法我都不推荐,根据我的实验最直接的解决问题的方法是在父容器A添加 margin-right:-3px; 一般情况下都可以解决这个问题。
<div style=”width:200px;margin-right:-3px;”>
<div style=”float:left;”></div>
<div style=”float:left;width:200px;”>我是6爷,我没醉</div>
</div>
四、珍爱生命,远离ie6
因为溢出bug产生的根本原因没人可以解释,所以也就没有对应的一劳永逸的办法。要从根本上解决这个问题只有一个办法,就是kill ie6。但是MS微软比我们还着急,可是就是不给力啊。。。。。
IE6的3像素神奇bug:缘起与解决方案的更多相关文章
- 【IE6的疯狂之十二】一个display:none引起的3像素的BUG
今天同事给我看了一个display:none引起的3像素的BUG,非常奇怪!从来没碰到过display:none还能引起这种bug. 看代码: <div style="width: ...
- 【IE6的疯狂之六】li在IE中底部3像素的BUG(增加浮动解决问题)
今天开发项目中碰到一个li在IE中的BUG,先来看设计原型(如图:) 两个红色中间是<li>1px的底边框: 我写的代码如下: ============================== ...
- IE6的3像素bug
IE6的3像素bug3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现.看下面这个左列固定,右列液态的例子,css代码如下: body { margin: ...
- 【IE6双倍边距】-IE6双倍边距的bug
效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...
- IE6的那些css常见bug(汇总)
IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...
- 我的第一篇文章 —— IE6的那些css常见bug(汇总)
我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的,听到了一些前端知识或者前沿技术. 另外 ...
- 完美解决浮动IE6 7中的兼容性BUG问题
想要创建出漂亮的网页设计,除了要认真学习每一个html和CSS代码之外,不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气,因为你本来写出的规规矩矩的代码,漂亮的设计就此就要完成了,却发 ...
- IE6中CSS常见BUG全集及解决方案——摘自网友
IE6中CSS常见BUG全集及解决方案 IE6双倍边距bug 当页面内有多个连续浮动时,如本页的图标列表是采用左浮动,此时设置li的左侧margin值时,在最左侧呈现双倍情况.如外边距设置为10px, ...
- Timestamp 数据类型四舍五入引起的神奇bug
神奇bug, Timestamp 会四舍五入也会引起 bug .. String UUID = java.util.UUID.randomUUID().toString(); long time = ...
随机推荐
- Logan:美团点评的开源移动端基础日志库
前言 Logan是美团点评集团移动端基础日志组件,这个名称是Log和An的组合,代表个体日志服务.同时Logan也是“金刚狼”大叔的名号,当然我们更希望这个产品能像金刚狼大叔一样犀利. Logan已经 ...
- 说一说Servlet的生命周期
servlet有良好的生存期的定义,包括加载和实例化.初始化.处理请求以及服务结束.这个生存期由javax.servlet.Servlet接口的init,service和destroy方法表达. Se ...
- 阿里云腾讯云服务器ubuntu多域名配置
1.将域名A记录解析到服务器的公网 IP 地址,把www也添加A记录到公网ip 2.ubuntu系统修改hosts文件,hosts文件目录为/etc/hosts,可以用vim编辑 sudo vim ...
- 二分搜索之C++实现
二分搜索之C++实现 一.源代码:BinarySearch.cpp #include<iostream> using namespace std; /*定义输出一维数组的函数*/ void ...
- [BZOJ4372]烁烁的游戏(动态点分治+线段树)
和[BZOJ3730]震波几乎一样,每个点建两棵线段树分别代表它的管辖范围内以它为LCA的路径的贡献和它对父亲的贡献. 注意点分树上的点的距离在原树上不单调,所以不能有若距离超出限制就break之类的 ...
- Python168的学习笔记6
如何派生内置不可变类型并修改实例化行为. 个人理解,如何派生出自己想要的类. class IntTuple(tuple): def __new__(cls,iterable): g = (x for ...
- python 爬虫 处理超级课程表传输的数据
借鉴的别人的思路 http://www.oschina.net/code/snippet_2463131_53711 抓取超级课程表传输的数据 他的传输数据居然是明文的-- 现在已经把自己的课表都抓出 ...
- Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition) A. Bear and Game 水题
A. Bear and Game 题目连接: http://www.codeforces.com/contest/673/problem/A Description Bear Limak likes ...
- 如何添加mysql到环境变量
环境: 在自己安装的lampp环境下,当使用mysql的时候必须指定路径才能进入数据库:这样显得太过麻烦.我们可以通过将mysql加入到环境变量中来解决该问题(mysql执行路径/opt/lampp/ ...
- [Linux] tmux 终端复用命令行工具
tmux 终端复用命令行工具 tmux 是一款终端复用命令行工具,通常用于 Terminal 的窗口管理.可以在终端软件重启后通过命令行恢复上次的 session. 安装运行 macOS 上使用 Ho ...