inline-block空内容最小高度的问题

Question

示例

  <div style="line-height: 0;background: red;">
    <span style="display: inline-block;
      width: 50px;
      line-height: 0;
      background: green;"></span>
  </div>

在chrome中高度是6px 在firefox中高度是4px 我已经去掉span前面的幽灵节点高度了 为什么span还会有高度呢？ 是哪里产生的高度?

Answer 1

你可以看成 div会以一个虚拟的x字符开始fontsize是浏览器的默认fontsize，但是这个x是看不到的，然后span的默认vertical-algin是baseline。那么span的底部会和父级的基线对齐 也就是和x的基线对齐
这时虽然div的高度为0，但是span的底部会和这个虚拟的x的基线对齐 导致把父级的div撑开了，之所以一个是6px，一个是4px应该是浏览器的默认字体不一样 导致基线高度不一样；你可以把div的font-size设置为0就可以了

Answer 2

不知道你想要的是哪种效果，能不能贴图出来呢