使用 border-radius 时 IE/Edge 中的单元格之间出现故障

Question

在 IE 10+ 和 Edge 中，当应用 border-radius 时，table 的 background 会从单元格底部泄漏。有任何修复或解决方法的想法吗？

我在这里设置了一个示例，table-元素上有红色 background：

table {
  background: red;
  border-spacing: 0;
}
td {
  background: white;
  border-radius: 1px;
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<p>In IE 10+ and Edge: the red background of the table leaks through the bottom of the cells when border-radius is applied</p>

CodePen

大多数浏览器中的呈现示例：

在 IE10+/Edge 中的渲染示例：

Answer 1

在 td 中设置 line-height:1，这样高度从 18.4px 变为 16px，因为 font-size 默认为 16px

更新

（OP 的评论）

Thank you for the reply, and I suppose this is a solution. The weakness that my simplified example doesn't show, is that if the table width is set to 100%, at certain window-width I have the same issue with vertical lines. You wouldn't happen to have a trick up your sleave for that issue as well?

您可以通过在 td 中添加一个 border-right 来解决这个问题，其颜色与 td

的 background 相同

table {
  background: red;
  border-spacing: 0;
}
td {
  background: white;
  border-radius: 1px;
  /* for easier display */
  padding: 1em; 
  /* fix horizontal line */
  line-height: 1; 
}
 /* fix vertical-line that sometimes shows up */
tr td:first-of-type {
 border-right:1px solid white
}

<table>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
  </tr>
</table>

<p>In IE 10+ and Edge: the red background of the table leaks through the bottom of the cells when border-radius is applied</p>

使用 border-radius 时 IE/Edge 中的单元格之间出现故障

Glitch between cells in IE/Edge when using border-radius

html

css

internet-explorer

microsoft-edge

更新