修复边界半径在 Firefox 中的不当行为

Posted 2023-03-06

【中文标题】修复边界半径在 Firefox 中的不当行为

【英文标题】：Fix border-radius from behaving inappropriately in Firefox

【发布时间】：2021-03-01 09:36:48

【问题描述】：

铬

火狐

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

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>

【参考方案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。

【讨论】：

@dgknca 凡有边框半径属性的地方，都需要添加-moz-border-radius-xxxxxx属性。你这样做了吗？

您在 Firefox 中尝试过您的解决方案吗？它们是非常古老的前缀。不用再用了。

【参考方案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。请参阅下面的 sn-p。

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>

【讨论】：

谢谢！正是与 td,th 相对的 thead、tbody、tfoot 等导致了上述问题。这是完美的。