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>
Example of rendering in most browsers:
Example of rendering in IE10+/Edge:
set line-height:1
in td
, with this the height goes from 18.4px
to 16px
given the font-size
by default is 16px
(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.