你如何确保<td>正好是200px高？

Question

我有一张里面有图片的桌子:

<table style="border: 3px solid rgb(0, 0, 0); width: 800px; background-color: rgb(255, 255, 255); margin-left: auto; margin-right: auto; border-collapse: collapse;">
 <tbody>
  <tr>
   <td style="text-align: center; padding: 0px; margin: 0px;"><img style="width: 800px; height: 200px; border: 0px;" alt="Logo" src="logo.png">
   </td>
  </tr>
 </tbody>
</table>

无论我做什么,图像底部仍然有一小块白色.使用Chrome的Inspector进行快速检查后发现它的td高度为204px!

如何强制td与图像的高度相同？

如上所示,我尝试了各种各样的事情......

Answer 1

解决方案:添加"vertical-align:bottom;" 到图像样式.
另一种解决方案,并不总是适合,是将图像display类型更改为block,而不是它的原始inline显示类型.
说明:出现问题是由于浏览器的自动行为在文本下为比通常更长的字符添加空格.图像是像文本一样的内联对象,因此它下面也有一个空间.
一个很好的解释是在quirksmode.org中写的:

并发症:几乎严格的模式

在早期,严格模式的实验总是提出这样的评论,即图像突然得到了一个无法消除的奇怪的底部边缘.原因是在严格模式下是内联元素,这意味着应该为可能的下降字符(如g,j或q)保留一些空格.当然,图像没有下降字符,因此空间从未使用过,但仍然需要保留.

解决方案是显式声明图像块级元素:img {display:block}.

尽管如此,浏览器供应商Mozilla尤其认为这是一个令人困惑的情况,他们引入了"几乎严格的模式".这被定义为严格模式,但图像仍然是块,而不是内联元素.

最常见的doctypes,包括我使用的docty,触发几乎严格的模式.到目前为止,图像的处理是几乎严格模式和真正严格模式之间最重要的区别.

通常,您应该使用CSS重置文档来避免此类问题.