haizlin/fe-interview

[html] 第311天 你知道著名的3像素Bug指的是什么吗？怎么解决呢？

haizhilin2013 opened this issue · 2 comments

haizhilin2013 commented

第311天 你知道著名的3像素Bug指的是什么吗？怎么解决呢？

我也要出题

carrie-xin commented

img标签渲染之后下方会出现几个像素（我用谷歌测试是4px, 火狐3.5px）的空白；
img是行内元素，默认display：inline; 它与文本的默认行为类似，下边缘是与基线对齐，而不是贴紧容器下边缘，所以会有几像素的空白；
解决办法：

  1. 把img设置为display: block;
  2. 给img和其父元素都设置vertical-align: top；让其top对齐而不是baseline对齐；
  3. 给img父元素设置line-height: 0;
  • 👍1
longhui520 commented 
1.一个div 中嵌入一个img后，img下方和div边框之间总是存留了3个像素的空白
2. img为内联元素，默认式与基线对齐，所以图片的下边缘与一个空白文本节点的基线对齐
3. img标签 display:block; vertical-align :middle
4. div 的 line-height:0; font-size:0
  • 👍1