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