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

【问题标题】：How do you ensure a <td> is exactly 200px tall?你如何确保 <td> 正好是 200px 高？
【发布时间】：2011-01-31 22:27:18
【问题描述】：

我有一张桌子，里面有一张图片：

<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 与图像高度相同？

正如你在上面看到的，我已经尝试了各种各样的东西......

【问题讨论】：

标签： html css image html-table

【解决方案1】：

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

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

【讨论】：

没有办法做到这一点吗？这是 Chrome，甚至不是 IE！
当然有。在 HTML 中创建像素完美的布局没有问题，您只需要知道如何。
不是，不是。浏览器之间的差异几乎使这一切变得不可能，而 HTML（尤其是用于表格数据而非布局的table）从未打算提供这种级别的控制。相反，它应该允许用户代理以在特定上下文（例如移动与桌面）中有意义的方式显示页面。您通常可以击败给定的页面提交，但它从来没有来自桌面应用程序背景的人所期望的那么容易。
我同意这种被打败的部分——这通常是非常艰苦的工作，并且是一个反复试验的过程。

【解决方案2】：

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

复杂性：几乎严格模式

在早期，实验严格模式总是提高评论说图像突然有了不可能的奇怪底部边距删除。原因是严格 mode 是一个内联元素，这意味着一些空间应该是为可能的下降者保留 g、j 或 q 等字符。当然图像没有下降器字符，所以空间从来没有已使用，但仍需保留。

解决方案是显式声明图像块级元素：img {显示：阻止}。

尽管如此，浏览器供应商 Mozilla 特别是，认为这是一个令人困惑的情况，他们引入了“几乎严格模式”。这被定义为严格模式，但与图像仍然是块，并且不是内联元素。

最常见的文档类型，包括我使用的一个，触发几乎严格的模式。图像的处理是迄今为止之间最重要的区别几乎严格模式和真正严格模式。

一般情况下，您应该使用避免此类问题的 CSS 重置文档。

【讨论】：

【解决方案3】：

试试下面的

table
{
table-layout:fixed;
}

【讨论】：

你也添加了

【解决方案4】：

对我来说是 200 像素高。你可以发布一个在线示例吗？

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

【讨论】：

不，不幸的是 CSS border-spacing 和 cellspacing 和 cellpadding 属性都不起作用。
你用的是什么浏览器？我正在 Chrome 上对此进行测试。
@George 我也在 Chrome 上对其进行了测试，但使用的图像无法加载 - 这似乎与加载的图像不同。