3像素文本偏移问题

一直知道IE6存在这个问题,以前的文章也做了说明,但是一直没有实验过,实验了之后才发现实际和理论还是有区别的,关于这个3像素文本偏移发生的情况,总结如下:

上一个元素做浮动,下一个元素不浮动

<div style="width:400px; float:left; background:#f90; "></div>
<div style="width:400px;background:#090; ">
    <p>文字一</p>
    <p>文字二</p>
    <p>文字三</p>
</div>

这样会出现3像素文本偏移,解决方法给第一个div添加margin-right:-3px属性,注意,是给第一个div添加,一直理解是给第二个div加,现在才发现错了,囧

这种结构在其他浏览器上其实显示是不正确的,两个元素不是排成一行,所以如果在建站的时候按照标准浏览器,firefox或者chrome来做,然后再去修正IE8,7,6的问题,基本不会遇到这种情况的

原文链接:,转发请注明来源!

发表评论