http://zjy.name/lab/ife/t1/index.html
上面页面中右上角的 GitHub 图标下方存在 4px 的间隙,通过 Development Tool 可以看到是由于 a 标签比 img 标签高出 4px 产生的(img 34px a 38px),已经知道这个问题可以通过 line-height:0 来解决,但自己写 demo 想要复现这个问题的时候却怎么也出不来:
http://zjy.name/lab/ife/t1/4px-demo.html
求大神详解其中奥妙。
1、关于不能重现的问题
是因为你的例子页面中没有添加 <!DOCTYPE html>,如果加了这个,也会发现有空隙的。关于 <!DOCTYPE html> 可以参考 http://angrycoder.iteye.com/blog/1757539
2、间隔的问题
图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li,其他的block元素中包含img也会有这个现象。