Chrome 和 Safari 表格单元格的高度不同？

【问题标题】：Chrome and Safari table cell different height?Chrome 和 Safari 表格单元格的高度不同？
【发布时间】：2021-05-10 15:31:59
【问题描述】：

我有一个简单的表格布局https://play.tailwindcss.com/Obrn65pCQN 问题是它在 Chrome 和 Safari 中看起来不同。在 Chrome 中，当表格单元格具有完整高度时，它看起来像预期的那样。我该如何解决？

<table class="bg-gray-200">
  <tbody>
    <tr>
      <td class="h-32 w-16"></td>
      <td class="bg-blue-200 bg-clip-content p-4 border border-red-600"><span class="inline-block bg-green-400">some content</span></td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

这看起来像是一个关于 Safari 的 background-clip: content-box 的错误。您可以使用渐变背景来创建相同的效果。

.my-cell {
  background: linear-gradient(rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.5)) 50% 50% / calc(100% - 2rem) calc(100% - 2rem) no-repeat;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css"/>

<table class="bg-gray-200">
  <tbody>
    <tr>
      <td class="h-32 w-16"></td>
      <td class="my-cell p-4 border border-red-600"><span class="inline-block bg-green-400">some content</span></td>
    </tr>
  </tbody>
</table>

【讨论】：