html - 渲染带有嵌套在其他表格中的半径边框的 html 表格单元格时的 IE 间隙

Question

在 IE(版本 11 和可能的旧版本)中，当我在嵌套表格中的 TD 上使用半径时，我在边框中得到了一个小的垂直和/或水平间隙(或线)。如果我在嵌套在表格中的 DIV 上使用半径，也会出现同样的问题。如果我在 IE 中使用缩放功能，线条将根据缩放级别出现或显示。在 Firefox 和 Chrome 中都没有问题。我正在使用嵌套，因为我需要半径附近的背景颜色与封闭表格的背景颜色不同。

这里是白线错误的截图:

[![在此处输入图片描述][1]][1]

示例代码如下:

<table style="width:50%;" cellspacing="0">
    <tr>
        <td style="background-color:#292F6C;">
            sadasd
        </td>
    </tr>
    <tr>
<td style="background-color: white;padding: 0px;border:0px;">
    <table style="border-spacing:0px;width:100%;height: 10px;">
        <tr>
            <td style="background-color:#292F6C;-webkit-border-bottom-left-radius: 11px;-moz-border-radius-bottomleft: 11px;border-bottom-left-radius: 11px;"></td>
        </tr>
    </table>
</td>
        </tr>
    </table>

https://jsfiddle.net/f7e6qo1m/

有什么建议吗？

Answer 1

发现在正方形边上添加 1px 边框似乎可以解决问题。

https://jsfiddle.net/f7e6qo1m/1/

    <table style="width:50%;" cellspacing="0">
        <tr>
            <td style="background-color:#292F6C;">
                sadasd
            </td>
        </tr>
        <tr>
<td style="background-color: white;padding: 0px;border:0px;">
    <table style="border-spacing:0px;width:100%;height: 10px;">
        <tr>
            <td style="background-color:#292F6C;-webkit-border-bottom-left-radius: 11px;-moz-border-radius-bottomleft: 11px;border-bottom-left-radius: 11px;border-top: 1px solid #292F6C;border-right: 1px solid #292F6C;"></td>
        </tr>
    </table>
</td>
            </tr>
        </table>