Question

我的页面上有一张桌子，我无法为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，但它没有改变我的输出。

这是一个显示我的问题的JSFiddle：http://jsfiddle.net/jzdy7yz4/

Answer 1

我认为tr元素实际上是保持方形边缘，导致问题。如果你使tr本身透明，并确保子项不继承透明背景颜色，它似乎工作：

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

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

Answer 2

我设法通过将CSS移动到.container并添加一些更改（height: 100%等）来显示顶部圆形。

我仍然看到外面看起来像白色的1px边框。我想这是某种间距。