圆角 CSS 不适用于 Firefox 中的表格

Question

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

超文本标记语言

<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并没有改变我的输出。

这是一个显示我的问题的示例。

Answer 1

在我看来，该tr元素实际上保持了方形边缘，从而导致了问题。如果您将其tr本身设置为透明，并确保子级不会继承透明背景颜色，那么它似乎可以工作：

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

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