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

Question

我有一个简单的表格布局 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>

Answer 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>