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

Question

In IE 10+ and Edge the background of the table leaks through the bottom of the cells when border-radius is applied. Any ideas for fix or workaround?

I've set up an example here, with red background on the table-element:

 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

---

Example of rendering in most browsers:

Example of rendering in IE10+/Edge:

Answer 1

set line-height:1 in td , with this the height goes from 18.4px to 16px given the font-size by default is 16px

UPDATE

(OP's Comment)

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?

you can solve that issue by adding a border-right to td with the same color as background of 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>