修复 border-radius 在 Firefox 中的不当行为

Question

Chrome

火狐

如何更改我的代码，使其在 Firefox 中具有 Chrome 外观？我正在使用伪元素来模仿重叠 table 行的外观。如果不使用伪元素也能实现这种外观，那也是适合我的解决方案。

th:first-child, tbody td:first-child {
  border-top-left-radius: 1.5rem;
}
th:last-child, tbody td:last-child {
  border-top-right-radius: 1.5rem;
}
tbody, tbody td {
  position: relative;
  z-index: 10;
  transform: scale( 1 );
  background-color: #333;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1.5rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1.5rem;
}
tbody::before, tbody::after {
  position: absolute;
  z-index: -10;
  top: 0; right: 0; bottom: 50%; left: 0;
  background-color: #222;
  content: "";
}
tbody::after {
  top: 50%; right: 0; bottom: 0; left: 0;
  background-color: #444;
}
tfoot {
  background-color: #444;
}

<style>
  html, table, p {
    margin: 0;
    padding: 0 !important;
    color: #ddd;
  }
  html {
    font-family: Arial;
    text-align: center;
    text-transform: capitalize;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
  }
  thead {
    background-color: #222;
  }
  th { text-transform: uppercase; }
  td { border-bottom: solid #222; }
</style>
<table>
  <thead>
    <tr> <th><p>one</p></th><th><p>two</p></th><th><p>three</p></th> </tr>
  </thead>
  <tbody>
    <tr> <td><p>four</p></td><td><p>five</p></td><td><p>six</p></td> </tr>
  </tbody>
  <tfoot>
    <tr> <td><p>seven</p></td><td><p>eight</p></td><td><p>nine</p></td> </tr>
  </tfoot>
</table>

Answer 1

在您的代码中也附加这些行：-

border-top-left-radius: 1.5rem;
-moz-border-radius-topleft: 1.5rem;
-webkit-border-top-left-radius: 1.5rem;

对其他半径做同样的事情。原因是 Firefox、Internet Explorer（IE9 之前）、Safari 不支持许多 CSS3 属性。您需要添加供应商前缀（-moz、-webkit）才能与 Firefox 和 Safari 一起使用。

Answer 2

实际上工作正常。设置background:red就可以看到了

thead th:first-child, tbody td:first-child {
  border-top-left-radius: 1.5rem;
  background:red;
}
th:last-child, tbody td:last-child {
  border-top-right-radius: 1.5rem;
}
tbody, tbody td {
  position: relative;
  z-index: 10;
  transform: scale( 1 );
  background-color: #333;
}
tbody td:first-child, tfoot td:first-child {
  border-bottom-left-radius: 1.5rem;
}
tbody td:last-child, tfoot td:last-child {
  border-bottom-right-radius: 1.5rem;
}
tbody::before, tbody::after {
  position: absolute;
  z-index: -10;
  top: 0; right: 0; bottom: 50%; left: 0;
  background-color: #222;
  content: "";
}
tbody::after {
  top: 50%; right: 0; bottom: 0; left: 0;
  background-color: #444;
}
tfoot {
  background-color: #444;
}

<style>
  html, table, p {
    margin: 0;
    padding: 0 !important;
    color: #ddd;
  }
  html {
    font-family: Arial;
    text-align: center;
    text-transform: capitalize;
  }
  table, th, td {
    padding: 1rem;
    border-spacing: 0;
  }
  thead {
    background-color: #222;
  }
  th { text-transform: uppercase; }
  td { border-bottom: solid #222; }
</style>
<table>
  <thead>
    <tr> <th><p>one</p></th><th><p>two</p></th><th><p>three</p></th> </tr>
  </thead>
  <tbody>
    <tr> <td><p>four</p></td><td><p>five</p></td><td><p>six</p></td> </tr>
  </tbody>
  <tfoot>
    <tr> <td><p>seven</p></td><td><p>eight</p></td><td><p>nine</p></td> </tr>
  </tfoot>
</table>

发生这种情况是因为您设置了 thead { background-color: #222;}。使用 th 而不是 thead。请参阅下面的代码段。

thead th:first-child,
tbody td:first-child {
  border-top-left-radius: 1.5rem;
}

th:last-child,
tbody td:last-child {
  border-top-right-radius: 1.5rem;
}

tbody,
tbody td {
  position: relative;
  z-index: 10;
  transform: scale( 1);
  background-color: #333;
}

tbody td:first-child,
tfoot td:first-child {
  border-bottom-left-radius: 1.5rem;
}

tbody td:last-child,
tfoot td:last-child {
  border-bottom-right-radius: 1.5rem;
}

tbody::before,
tbody::after {
  position: absolute;
  z-index: -10;
  top: 0;
  right: 0;
  bottom: 50%;
  left: 0;
  background-color: #222;
  content: "";
}

tbody::after {
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #444;
}

tfoot {
  background-color: #444;
}

<style>
  html,
  table,
  p {
    margin: 0;
    padding: 0 !important;
    color: #ddd;
  }
  
  html {
    font-family: Arial;
    text-align: center;
    text-transform: capitalize;
  }
  
  table,
  th,
  td {
    padding: 1rem;
    border-spacing: 0;
  }
  
  th {
    background-color: #222;
  }
  
  th {
    text-transform: uppercase;
  }
  
  td {
    border-bottom: solid #222;
  }
</style>
<table>
  <thead>
    <tr>
      <th>
        <p>one</p>
      </th>
      <th>
        <p>two</p>
      </th>
      <th>
        <p>three</p>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <p>four</p>
      </td>
      <td>
        <p>five</p>
      </td>
      <td>
        <p>six</p>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <p>seven</p>
      </td>
      <td>
        <p>eight</p>
      </td>
      <td>
        <p>nine</p>
      </td>
    </tr>
  </tfoot>
</table>

修复 border-radius 在 Firefox 中的不当行为

Fix border-radius from behaving inappropriately in Firefox

html

css

firefox

html-table

border-radius

Chrome

火狐