Firefox 58中表格border-radius无法圆角背景问题求助

这个问题其实是浏览器对CSS标准实现的差异导致的，并不是Firefox存在bug，反而是Chrome和IE做了额外的兼容处理来适配老旧代码。咱们拆解来看：

核心原因 #

1. border-radius在表格上的标准行为：
   根据CSS规范，当你给<table>设置border-radius时，默认情况下内部单元格（包括表头<th>）的背景不会自动被表格的圆角裁剪——因为表格单元格的背景是独立于表格容器的渲染层。Firefox严格遵循了这个规范，所以表头的bgcolor背景会溢出表格的圆角。

2. bgcolor属性的特殊性：
   bgcolor是非常老旧的HTML属性，不属于CSS规范范畴。Chrome和IE为了兼容大量遗留代码，额外做了逻辑处理，自动将表头的bgcolor背景和表格圆角进行裁剪对齐，但这其实是非标准的行为。

解决方法（跨浏览器兼容的正确写法） #

要让所有浏览器都正确渲染带圆角和表头背景的表格，推荐用现代CSS写法替代老旧的HTML属性，同时添加必要的裁剪规则：

1. 用CSS的background-color替代bgcolor属性
2. 给表格添加overflow: hidden，强制内部元素背景被表格圆角裁剪
3. 调整表格的边框合并规则（可选，根据你的需求）

示例代码：

<style>
  .rounded-table {
    border-radius: 10px;
    overflow: hidden;
    /* 如果需要合并边框，使用border-collapse: collapse; 但注意此时可能需要额外处理表头圆角 */
    border-collapse: separate;
    border-spacing: 0;
  }
  .rounded-table thead th {
    background-color: #2c3e50;
    color: white;
    padding: 8px;
  }
  .rounded-table tbody td {
    padding: 8px;
    border-bottom: 1px solid #eee;
  }
</style>

<table class="rounded-table">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容1</td>
      <td>内容2</td>
    </tr>
    <tr>
      <td>内容3</td>
      <td>内容4</td>
    </tr>
  </tbody>
</table>

总结 #

Firefox的表现是符合CSS标准的，而Chrome和IE的行为属于“兼容妥协”。你的代码依赖了老旧的bgcolor属性，且没有设置强制裁剪背景的CSS规则，才导致了跨浏览器的表现差异。改用上述现代CSS写法后，就能在所有浏览器中得到一致的圆角表格效果了。

内容的提问来源于stack exchange，提问作者milnuts