溢出：隐藏在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中不工作？

回答

相关问题