优雅的方式围绕div和内容之间的差距

时间:2011-06-23 12:44:27

标签: html css

this fiddle中,链接的背景与大多数浏览器中#content div的背景之间存在1px的差距,在大多数缩放级别(不知道为什么缩放似乎会影响它)。这似乎是因为包含链接的div在顶部和底部占据了比链接本身多一个像素。

我可以通过给它一个负面的利润底部以一种黑客的方式解决它,但我想要一个更优雅的跨浏览器解决方案。有什么想法吗?

4 个答案:

答案 0 :(得分:4)

在链接上添加1px的填充填补了空白。

如果您因为某种原因不喜欢/不能这样做,那么增加line-height也可能会解决问题。

答案 1 :(得分:2)

添加重置CSS可解决此问题:http://jsfiddle.net/jomanlk/kcWQw/5/

我使用过Eric Meyer's reset。你需要添加额外的样式,以便按照自己喜欢的方式恢复,但重置可以解决任何问题。

答案 2 :(得分:2)

你可以使用花车来使东西叠得更整齐 - 看看这个小提琴...... http://jsfiddle.net/Ts7TL/

如果你没有使用花车,请尝试在行高处寻找 - 这可能会有所帮助。

如下所述 - 使用css重置始终是一种很好的做法。

答案 3 :(得分:2)

最优雅(和“最接近你拥有的”)解决方案是在display: inline-block上使用a

http://jsfiddle.net/kcWQw/8/