揭秘CSS(第 1 版)
10.4.2 文本3像素偏移Bug
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

渐进增强与优雅降级

兼容浏览器的方法

IE的hasLayout

修复IE的常见BUG

浮动元素双倍边距Bug

文本3像素偏移Bug

在IE6及更低版本中,当一个浮动元素与一个非浮动元素相邻时,在非浮动元素中,会莫名的为靠近浮动元素的内容添加 3 像素的间隙。

假设在一个容器中,有两个元素:

<div id="wrapper">
    <div class="fl">float</div>
    <p>...</p>
</div>

左侧的 div 元素向左浮动,而右侧的 p 元素不浮动:

.fl {
   float: left;
   width: 100px;
   height: 60px;
}

在IE6中,就会发现在非浮动元素中的文本和浮动元素之间,莫名其妙会出现 3px 的间隙,一旦浮动停止,3px 的间隙就会消失。如图 10‑4 所示:

文本3像素偏移Bug
图10-4 文本3像素偏移Bug

由于这个间隙很小,在文本环绕浮动元素时,很难被注意到。但是,如果为 p 元素设置一个与浮动元素宽度相等的左外边距,则在浮动停止的时候,3px 的间隙就会消失,可以看到文本会突然出现一个台阶。如图 10‑5 所示:

文本3像素偏移Bug导致台阶
图10-5 文本3像素偏移Bug导致台阶

当然,如果这个Bug不影响布局,完全可以让它随风而去。但是,如果影响了布局,或者你不能容忍一点点瑕疵的话,就得想办法消除这 3px 的间隙。

如果希望段落文本环绕浮动元素,只需要使用IE hack,将浮动元素的右边距向左缩进 3 个像素,便可轻松解决问题。

.fl {
   float: left;
   width: 100px;
   height: 60px;
   _margin-right: -3px;
}

如果不希望段落文本环绕浮动元素,就可以通过任何一种方式,让 p 元素触发布局。触发布局的方法很多,最常用的莫过于 _zoom: 1 了。触发布局后,p 元素便会独立布局,3px 的间隙自然就消失了。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验