使用border-radius时，IE / Edge中的单元格之间出现毛刺

Question

在IE 10+和Edge中，background的{​​{1}}在应用table时会泄漏到单元格的底部。有任何修复或解决方法的想法吗？

我在这里设置了一个示例，表格元素上有红色border-radius：

＆＃13;

＆＃13;

background

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

CodePen

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

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

Answer 1

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

更新

（OP＆＃39;评论）

  

感谢您的回复，我想这是一个解决方案。该   我简化的例子没有显示的弱点是，如果是表格   width设置为100％，在某个窗口宽度我有同样的问题   垂直线条。你不会碰到你的伎俩   也适用于那个问题？

您可以通过将border-right添加到与td background的{​​{1}}相同的td来解决该问题

＆＃13;

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;