CSS“三像素的文本慢移”终极解决方案

摘要：近日我在开发网页模板的时候遇到一个“三像素的文本慢移”的问题,非常恼人.在网上查了很多的方法,包括官方给的说明发现真正应用到网页中也不大好.先看这个问题的官方提示:如果无名线框（包含内联内容的框）邻近某个浮动，则线框和浮动边缘之间会出现 3 个像素 (3px) 的间隙。在内容…

近日我在开发网页模板的时候遇到一个“三像素的文本慢移”的问题,非常恼人.

在网上查了很多的方法,包括官方给的说明发现真正应用到网页中也不大好.

先看这个问题的官方提示:

如果无名线框（包含内联内容的框）邻近某个浮动，则线框和浮动边缘之间会出现 3 个像素 (3px) 的间隙。在内容清除浮动时，此间隙会消失，导致内容朝着浮动的方向“慢移”三个像素。请注意，当左对齐文本邻近右浮动时，可能难以看到此间隙，但它确实存在，而且它可能导致紧密的布局中出现“浮动下降”。

网上的解决方案:在被浮动层属性里加一个zoom: 1 但是这种方法好像不大管用.

于是自己苦思终于找到一个解决此问题的好办法

看提示字面意思 不是说内联内容受三像素影响吗，我都改成盒子结构，让层和层之间相互浮动,那这个问题不就轻松解决了吗.想到这里立马给层加上个ID,再加浮动。检查了一下，结果问题解决！