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

Question

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

我在这里设置了一个示例，在table-element上有红色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

设置line-height:1 td line-height:1 ，这个高度从18.4px变为16px ，默认情况下font-size为16px

UPDATE

（OP的评论）

谢谢你的回复，我想这是一个解决方案。 我的简化示例未显示的弱点是，如果表格宽度设置为100％，则在某个窗口宽度处，我对垂直线条有同样的问题。 你也不会碰巧在这个问题上诡计多端？

您可以通过添加一个解决这个问题的border-right到td用相同的颜色作为background的td

 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>