添加行时 Firefox 单元格边框呈现错误

Posted 2023-03-06

【中文标题】添加行时 Firefox 单元格边框呈现错误

【英文标题】：Firefox cell border rendering bug when adding rows

【发布时间】：2019-03-03 21:27:12

【问题描述】：

我有一张带有折叠边框的表格。有些单元格周围有边界。当我向这个表中添加行时，突然给定列中的所有单元格在 Firefox 中都有边框。

CSS 很简单

table 
  border-collapse: collapse;


.has-errors 
  border: 2px solid red;

这里有一个 JSBin 来说明这个问题：https://jsbin.com/jopaxoyesu/edit?html,css,js,output

单击文档会添加行。如果单击一次，就可以了。再次单击，突然该列中的所有单元格都将具有左右边框。这只发生在 Firefox 中。

有什么解决方法？

我不能单独使用边框。 使用'outline'会使边框加倍并且看起来很糟糕。 我不希望强制重新设计，因为我担心性能。我还能做什么？

【参考方案1】：

我知道您提到了不重新设计的偏好，但是到目前为止我发现的唯一解决此问题的方法是删除边框折叠。

table 
/* REMOVED border-collapse*/


.has-errors 
    outline: 2px solid red;
    -moz-outline: 2px solid red;
    outline-offset:-1px;

【讨论】：

请提供正确格式的答案，更正问题的代码可以帮助用户更好地理解答案。

【参考方案2】：

是的，问题是边框折叠，但是如果您在表格上使用 cellspacing="0" 并在 css 中使用一个小技巧（如果附近有 2 个或更多.has-errors，则删除左边框），它也适用于火狐！

$(document).on('click', function() 
  $('table').append('<tr><td>1</td><td>1</td><td>1</td></tr>')
);

.has-errors 
  border: 2px solid red;


.has-errors + .has-errors
  border-left: none;

 <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 
 <table cellspacing="0"> 
    <tr>  
      <td >1</td>
      <td class="has-errors">2</td>
      <td class="has-errors">3</td>
    </tr>
  </table>

【参考方案3】：

如果你想保持边框折叠，你也可以使用轮廓代替边框

$(document).on('click', function() 
  $('table').append('<tr><td>1</td><td>1</td><td>1</td></tr>')
);

table 
  border-collapse: collapse;


.has-errors 
   outline: 2px solid red;
   -moz-outline: 2px solid red;
   outline-offset:-1px;

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
 
 <table cellspacing="0"> 
    <tr>  
      <td >1</td>
      <td class="has-errors">2</td>
      <td class="has-errors">3</td>
    </tr>
  </table>

【讨论】：

这是使用轮廓偏移的非常聪明的方法，很高兴知道。

outline-offset 在 IE11 中不受支持，但我认为我可以忍受这些用户获得稍微丑陋的体验。谢谢！