溢出：隱藏在Firefox中不起作用？

Question

我有一個帶有圓角的表，並且放置了一個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>

Answer 1

規范不需要您所尋找的行為：“'border-radius'屬性確實適用於'table'和'inline-table'元素。當'border-collapse'為'collapse'時，UA可能會應用'table'和'inline-table'元素的border-radius屬性，但不是必需的。” （ 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; }

Answer 2

這可能會有所幫助。 如何使CSS3圓角在Chrome / Opera中隱藏溢出

Answer 3

添加您想要的位置：

-moz-overflow: hidden;

Answer 4

我喜歡皮特·斯科特的回答。 但是，根據您的設計，可以通過將表本身包裝在包含半徑為左右的隱藏元素的包含元素中來在桌子上創建半徑效果。 然后，相對於表格放置位置，並放置-* px以創建所需的視覺效果。 但是，沒有看到理想的最終結果，我無法提供示例。

Answer 5

可以使用以下技巧來更改overflow對table元素的影響：更改table的display ，例如，更改為inline-block （此值保留表格的縮小配合寬度，並且不應破壞布局表格被塊元素包圍）。 所產生的呈現效果將等同於該表，就好像該表具有帶有border-radius和overflow的div包裝器一樣，這在Firefox中呈現沒有問題。 這是JSbin示例 。