div 上的边框与 Chrome 中 table header 上的边框不对齐

Question

我有一个 table 和一个 header，我试图在它旁边放置一个 div，这样它看起来像是 [=41] 的扩展=] header。这在 Firefox 中工作正常：（X 在 div 中与 thead 分开）

但在 Chrome 中边框偏移了一个像素：

当我检查 Chrome 中的元素时，thead 和 div 的高度相同，所以奇怪的是它们的边框最终会出现在不同的地方。如果我在 div 的顶部添加 1 像素的边距，边框会对齐，但它会在顶部创建一个 1 像素高的间隙。

这是一个代码框，显示了我正在处理的内容。此示例使用 TailwindCSS。 https://codesandbox.io/s/quirky-hooks-gf6cx 在 Firefox 中查看，Chrome 以了解不同之处。

感谢您的帮助。

Answer 1

Chrome计算table的高度多了1px，好像是个bug。

要修复您可以将显示块添加到 tr https://codesandbox.io/s/modest-tu-muw2m

编辑：

您可以在 th 元素内创建一个 div 以避免错误： https://codesandbox.io/s/reverent-microservice-ltz40