IE6在解析浮动:3像素Bug

裸睡朋友

裸睡朋友

2016-02-20 00:27

下面,图老师小编带您去了解一下IE6在解析浮动:3像素Bug,生活就是不断的发现新事物,get新技能~

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

在一个典型的浮动中,如下面的图片所示:灰色矩形是外部容器,绿色容器在外部容器内向左浮动,未浮动的部分包围着浮动部分。但是IE6在解析这样的浮动时,会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距。为了更加直观,让我们将Firefox和IE6中的效果做一对比(上图是Firefox中的效果,下图是IE6中的效果):

2010-05-26 09 39 21.gif

2010-05-26 09 41 44.gif

你会清晰的观察到IE6中的3像素边距Bug。为了确定到底是不是3个像素,我在Photoshop将图片放大到1600%,如下面的截图所示,的确是3个像素。

2010-05-26 10 01 31.gif

如何解决这个Bug?

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

如果这个Bug不影响你的布局,你完全可以让它随风而去。但是,如果影响了布局或者你不能容忍一点点瑕疵的话,只需要将浮动部分的右边距向左缩进3个像素,使用只针对IE的hack。

* html .float{ margin-right: -3px; }
展开更多 50%)
分享

猜你喜欢

IE6在解析浮动:3像素Bug

Web开发
IE6在解析浮动:3像素Bug

IE6下DIV高度显示的Bug

Web开发
IE6下DIV高度显示的Bug

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

IE6奇数宽度或高度的BUG

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
IE6奇数宽度或高度的BUG

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

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

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

IE6使用浮动去掉元素中的多余空白间距

Web开发
IE6使用浮动去掉元素中的多余空白间距

修正IE6不支持position:fixed的bug

Web开发
修正IE6不支持position:fixed的bug

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

囍

CSS教程:视觉语义不等于基于表现的类

CSS教程:视觉语义不等于基于表现的类
下拉加载更多内容 ↓