我的位置: 首页  >   揭秘CSS  >   10.4.2 文本3像素偏移Bug

10.4.2 文本3像素偏移Bug

编辑:比特教程网    时间:2018-10-13 03:47    


在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 的间隙自然就消失了。