溢出：隐藏在 Firefox 中不起作用？答案

【问题标题】：Overflow:hidden not working in Firefox?溢出：隐藏在 Firefox 中不起作用？
【发布时间】：2013-07-12 16:05:21
【问题描述】：

我有一张圆角的表格，我在上面放了一个overflow: hidden CSS 命令，这样各个单元格的角就不会突出。它在 Chrome 上运行良好，但在 Firefox 上不行。谁能告诉我怎么了？

<style>
table {
        border-spacing: 0px;
        border: 1px solid #222;
        border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
        overflow: hidden;
}
th {
        height: 30px;
        color: #fff;
        background: #222;
        text-align: left; 
}
tr:nth-child(even) {
    background: #245876;
    color: #fff;
    border: none;
    height: 25px;
}
tr:nth-child(odd) {
    height: 23px;
}
.pos {
        width: 50px;
}
.name {
        width: 175px;
}
</style>

<table>
    <thead>
        <tr>
            <th class="pos"></th>
            <th class="name">Name</th>
            <th class="amount">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="pos">1</td>
            <td class="name">Bob</td>
            <td class="amount">1324353</td>
        </tr>
        <tr>
            <td class="pos">2</td>
            <td class="name">John</td>
            <td class="amount">10611</td>
        </tr>
        <tr>
            <td class="pos">3</td>
            <td class="name">Bill</td>
            <td class="amount">3270</td>
        </tr>
        <tr>
            <td class="pos">4</td>
            <td class="name">Brian</td>
            <td class="amount">1950</td>
        </tr>
        <tr>
            <td class="pos">5</td>
            <td class="name">Dan</td>
            <td class="amount">1760</td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： html css html-table overflow

【解决方案1】：

规范不需要您正在寻找的行为：“'border-radius' 属性确实适用于 'table' 和 'inline-table' 元素。当 'border-collapse' 为 'collapse' 时，UA可以将border-radius属性应用于'table'和'inline-table'元素，但不是必须的。” (http://dev.w3.org/csswg/css-backgrounds/#border-radius-tables)

它可能根本无法在 Firefox 中运行。如果是这种情况，您可以将边框半径应用于标题单元格（标题行中的：first-child 和 :last-child），但它并不总是正确排列。有点像 PITA，我知道。

thead tr th:first-child { border-radius:8px 0 0 0; }
thead tr th:last-child { border-radius:0 8px 0 0; }

【讨论】：

【解决方案2】：

这可能会有所帮助。 How to make CSS3 rounded corners hide overflow in Chrome/Opera

【讨论】：

【解决方案3】：

在你想要的地方添加：

-moz-overflow: hidden;

【讨论】：

这在 Firefox 22 (Win 7) 中似乎没有任何效果。

【解决方案4】：

我喜欢 Pete Scott 的回答。但是根据您的设计，您可以通过将表格本身包装在具有左右半径的包含元素中来在表格上创建半径效果，溢出隐藏。然后，相对于表格定位，并使用 -*px 来创建所需的视觉效果。但是没有看到预期的最终结果，我无法提供示例。

【讨论】：

【解决方案5】：

可以使用以下技巧更改overflow 对table 元素的影响：将table 的display 更改为inline-block（此值保留收缩配合宽度并且不应该破坏布局，假设表格被块元素包围）。生成的渲染将等同于表格具有带有border-radius 和overflow 的div 包装器，它在Firefox 中渲染没有问题。这是JSbin example。

【讨论】：