[html] 你知道著名的3像素Bug指的是什么吗?怎么解决呢?
img标签渲染之后下方会出现几个像素(我用谷歌测试是4px, 火狐3.5px)的空白;
img是行内元素,默认display:inline; 它与文本的默认行为类似,下边缘是与基线对齐,而不是贴紧容器下边缘,所以会有几像素的空白;
解决办法:把img设置为display: block;给img和其父元素都设置vertical-align: top;让其top对齐而不是baseline对齐;给img父元素设置line-height: 0;
个人简介
我是歌谣,欢迎和大家一起交流前后端知识。放弃很容易,
但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题