html - TD 琐碎的修复需要永远

Question

我花了 2 天时间试图弄清楚为什么这个 td 的高度比它应该的要大，我知道这可能是一些我几乎无法观察到的微不足道的事情。

这是 HTML 在检查器中的外观：

请注意，高度为 50px，但 td 没有响应

即使图像高度是 50px :)

5px 是从哪里来的？

Answer 1

问题的简单演示：

<table><tr><td style="border: solid red 1px; padding:0"><img 
  src=http://lorempixel.com/54/50/ alt=""></table>

绘制单元格边框后，您可以看到图像下方有空间。它保留给字母的后代，即使没有真正的字母存在——内容仍被视为文本。

最简单的解决方法是将以下内容添加到样式表中：

td img { display: block; }

这导致图像被设置为一个简单的块，而不是被视为位于文本基线上的元素文本（可以说是一个大字母）。