尽管计算出的边界半径值，Firefox并没有渲染<tr>圆形边框

我试图将表格左下角的左下角四舍五入14px。对于除Firefox以外的所有浏览器，我都可以这么做。尽管计算出的边界半径值，Firefox并没有渲染<tr>圆形边框

在Firefox中，<td>单元正在四舍五入，但它下面的<tr>正在溢出，并且我无法像其他浏览器那样以任何方式操纵它的边框。尽管如此，<tr>元素的计算值表明边界半径为14px，但外观是没有应用边界半径。

HTML

<table role="grid"> 
<tbody role="rowgroup"> 
<tr role="row" data-uid="da94159d-dc21-4a3c-88f1-5fde7cb5736c"> 
<td role="gridcell" class="round-grid-corner"><span>Add Section</span></td> 
<td role="gridcell">24/01/2001</td> 
</tr> 
</tbody> 
</table>

CSS

.round-grid-corner{ 
-moz-border-bottom-left-radius: 14px; 
-webkit-border-bottom-left-radius: 14px; 
    border-bottom-left-radius: 14px; 
}

我曾尝试以下，什么也没有发生。

添加background-clip：padding-box;
添加边框半径的所有元素
添加边界崩溃：独立

着色<tr>的背景颜色是不是一种选择，因为该表，因为它割去表格边框。

来源

2016-03-30 ecclesm

''是一个虚拟元素，用于包装一行的单元格，没有更多目的。你可以设计一些属性，但不是全部。其他浏览器可能正在做出特定的事情来实现这一目标。但''的正常行为是为了包装单元格，不再是。但是，您分享的代码与''中的边框半径配合良好。请更好地解释你需要的，因为你的代码有效。 https://jsfiddle.net/7vu0ay9j/ –

行（''）本身没有边框。它是您想要应用边框样式的单元格（''），但并非所有CSS属性都适用于所有元素，我怀疑单元格就是其中之一。 –

您必须将舍入应用于表和TD。这在FF中适合我。

实施例：

HTML

<table class="zui-table zui-table-rounded"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Height</th> 
      <th>Born</th> 
      <th>Salary</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>DeMarcus Cousins</td> 
      <td>C</td> 
      <td>6'11"</td> 
      <td>08-13-1990</td> 
      <td>$4,917,000</td> 
     </tr> 
     <tr> 
      <td>Isaiah Thomas</td> 
      <td>PG</td> 
      <td>5'9"</td> 
      <td>02-07-1989</td> 
      <td>$473,604</td> 
     </tr> 
     <tr> 
      <td>Ben McLemore</td> 
      <td>SG</td> 
      <td>6'5"</td> 
      <td>02-11-1993</td> 
      <td>$2,895,960</td> 
     </tr> 
     <tr> 
      <td>Marcus Thornton</td> 
      <td>SG</td> 
      <td>6'4"</td> 
      <td>05-05-1987</td> 
      <td>$7,000,000</td> 
     </tr> 
     <tr> 
      <td>Jason Thompson</td> 
      <td>PF</td> 
      <td>6'11"</td> 
      <td>06-21-1986</td> 
      <td>$3,001,000</td> 
     </tr> 
    </tbody> 
</table>

CSS：

.zui-table { 
    border: solid 1px #DDEEEE; 
    border-collapse: collapse; 
    border-spacing: 0; 
    font: normal 13px Arial, sans-serif; 
} 
.zui-table thead th { 
    background-color: #DDEFEF; 
    border: solid 1px #DDEEEE; 
    color: #336B6B; 
    padding: 10px; 
    text-align: left; 
    text-shadow: 1px 1px 1px #fff; 
} 
.zui-table tbody td { 
    border: solid 1px #DDEEEE; 
    color: #333; 
    padding: 10px; 
    text-shadow: 1px 1px 1px #fff; 
} 
.zui-table-rounded { 
    border: none; 
} 
.zui-table-rounded thead th { 
    background-color: #CFAD70; 
    border: none; 
    text-shadow: 1px 1px 1px #ccc; 
    color: #333; 
} 
.zui-table-rounded thead th:first-child { 
    border-radius: 10px 0 0 0; 
} 
.zui-table-rounded thead th:last-child { 
    border-radius: 0 10px 0 0; 
} 
.zui-table-rounded tbody td { 
    border: none; 
    border-top: solid 1px #957030; 
    background-color: #EED592; 
} 
.zui-table-rounded tbody tr:last-child td:first-child { 
    border-radius: 0 0 0 10px; 
} 
.zui-table-rounded tbody tr:last-child td:last-child { 
    border-radius: 0 0 10px 0; 
}

FIDDLE

来源

2016-04-04 15:21:01 Korgrue

谢谢，像梦一样工作。奇怪的是，这只发生在Firefox，但可以看到他们为什么打算为你无法修改 – ecclesm

根据规范 - 四舍五入不是表行的属性。 Firefox很可能会坚持规范，其他人则会扩大规范。也许有一天我们会达到所有浏览器开发者都会坚持规格的地步。 – Korgrue

尽管计算出的边界半径值，Firefox并没有渲染<tr>圆形边框

回答

相关问题