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检查器进行快速检查后发现，td的高度为204px！

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

如上所述，我尝试了各种各样的事情......

Answer 1

解决方案：添加“vertical-align：bottom;”图像风格。
另一种并非总是合适的解决方案是将图片display类型更改为block，而不是原来的inline显示类型。
说明：由于浏览器的自动行为导致问题发生，因为浏览器会在文本下为比平时更长的字符添加空格。图像是像文本一样的内联对象，因此它下面也有一个空间一个很好的解释is written in quirksmode.org：

并发症：几乎严格模式
     在早期，实验用   严格模式总是提高了   评论图像突然得到了   奇怪的底部边缘，不可能   除去。原因是严格的   mode是内联元素，   这意味着应该有一些空间   留作可能的下降器   像g，j或q这样的字符。当然   图像没有下降   人物，所以空间永远不会   使用过，但仍然需要保留。

解决方案是明确声明   图像块级元素：img   {display：block}。

尽管如此，浏览器供应商Mozilla   特别是，认为这是一个这样的   令他们困惑的情况   介绍了“几乎严格的模式”。这个   被定义为严格模式，但有   图像继续是块，和   不是内联元素。

最常见的doctypes，包括   一个我使用，触发几乎严格的模式。   到目前为止，图像的处理   最重要的区别   几乎严格的模式，真的很严格   模式。

通常你应该使用CSS重置文件来避免像这样的问题。

Answer 2

如果您放弃使用HTML创建像素完美布局的想法，那么您将过上更幸福的生活。

如果你真的需要像素精度，你可以尝试抛弃table并通过CSS使用绝对定位。

Answer 3

尝试以下

table
{
table-layout:fixed;
}

Answer 4

这对我来说是200px高。你可以发布在线示例吗？

如果它有4个像素差异，我很确定罪魁祸首是以前的cellspacing和cellpadding HTML属性。您可以尝试将它们设置为0只是为了看它是否有效？与之相当的CSS可能是边框间距，但我无法尝试，因为它适用于我。

你如何确保a正好是200px高？

4 个答案: