圆角 CSS 不适用于 Firefox 中的 table

Question

我的页面上有一个 table，我无法为 Firefox 应用圆角。我已经在 IE、Chrome 和 Safari 上进行了测试，它在这些浏览器上运行良好。

HTML

<table class="login-table">
    <tr id="header">
        <td id="logo">

        </td>
    </tr>
</table>

CSS

#logo {
    height:85px;
    width:170px;
    border-top-right-radius:14px;
    border-top-left-radius:14px;
}

我尝试将 -moz-border-radius-topleft:14px 和 -moz-border-radius-topright:14px 添加到 #logo，但它并没有改变我的输出。

这里 an example 显示了我的问题。

Answer 1

我设法通过将 CSS 向下移动到 .container 并添加一些更改（height: 100% 等）

来显示顶部圆角

我仍然看到外面有一个 1px 的白色边框。我想这是某种间距。

Answer 2

在我看来，tr 元素实际上保持了它的方形边缘，导致了这个问题。如果您使 tr 本身透明，并确保 children 不继承透明 background-color，它似乎可以工作：

// The first <tr>
#header { 
    background-color: transparent!important;
}

// The child of the first <tr>
#logo {
    background-color:#1c918a;
}

Rounded corner CSS not working with table in Firefox