溢出：隱藏在Firefox中不工作？

我有一個圓角的桌子，我在其上放了一個overflow: hidden CSS命令，這樣單個單元格的角不會突出。它適用於Chrome，但不適用於Firefox。有人能告訴我什麼是錯的嗎？溢出：隱藏在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>

來源

2013-07-14 Alex

這可能有幫助。 How to make CSS3 rounded corners hide overflow in Chrome/Opera

來源

2013-07-14 20:14:54 luke

你有錯誤的想法 – 2013-07-14 20:19:01

添加您希望：

-moz-overflow: hidden;

來源

2013-07-14 20:18:16

這似乎在Firefox 22（Win 7）中沒有任何影響。 –

該規範並不要求你正在尋找的行爲：「邊界半徑的財產確實適用於‘表’和‘內聯表’元素」。當'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; }

來源

2013-07-14 20:19:06

我喜歡皮特斯科特的回答。但是，根據您的設計，您可以通過將表格本身包含在半徑爲左右的包含元素（隱藏溢出）中來在表格上創建半徑效果。然後，相對於表格進行定位，並使用 - * px創建所需的視覺效果。但沒有看到預期的最終結果，我無法提供一個例子。

來源

2013-07-14 20:24:40 seemly

這是可能的改變與下面的技巧的table元素的overflow的影響：改變table的display，例如，以inline-block（此值保持表的熱縮寬度，不應打破假設表格被塊元素包圍的佈局）。所得到的渲染將與等效於表格具有border-radius和overflow的div包裝，這在Firefox中呈現沒有問題。這裏是JSbin example。

來源

2013-07-15 00:12:47

溢出：隱藏在Firefox中不工作？

回答

相關問題