Firefox点缀边框错位

Question

我的表格中包含border-collapse，大多数单元格都有dotted边框。

Firefox中的渲染很奇怪。

代码是：

＆＃13;

＆＃13;

<table style="border-collapse: collapse">
  <tr>
    <td style="border: 1px solid blue">a</td>
    <td style="border: 1px solid blue">b</td>
  </tr>
  <tr>
    <td style="border: 1px dotted blue">a</td>
    <td style="border: 1px dotted blue">b</td>
  </tr>

</table>

＆＃13;

＆＃13;

＆＃13;

这是它在Chrome与Firefox中呈现的方式：

任何想法如何解决？

Answer 1

browsers in rendering one pixel wide dotted borders中存在错误，但border of size 1px没有解决方法。在这种特殊情况下，如果您set the border width to 2px或更多错误，错误似乎就会消失。

＆＃13;

＆＃13;

table td{
margin:0;
}

＆＃13;

<table style="border-collapse: collapse">
  <tr>
    <td style="border: 2px solid blue">a</td>
    <td style="border: 2px solid blue">b</td>
  </tr>
  <tr>
    <td style="border: 2px dotted blue">a</td>
    <td style="border: 2px dotted blue">b</td>
  </tr>

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

作为替代方案，您可以使用CSS概述。

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

但请注意，大纲与边框不同：

  

轮廓永远不会占用空间，因为它们是在元素的内容之外绘制的。

因此，在边框折叠的情况下，您的轮廓将在表格单元格上相互重叠。这可以通过添加-1px outline-offset来修复。

下面是两个示例，第一个表使用大纲，第二个表使用边框进行比较。

强制性小提琴：

https://jsfiddle.net/sh9oqq2k/1/

浏览器支持：

https://caniuse.com/#search=outline

＆＃13;

＆＃13;

/* global */
table {
  border-collapse: collapse;
}
td {
  padding: 8px;
}

/* outline */
tr:nth-child(1) td {
  outline: 1px solid blue;
  outline-offset: -1px;
}
tr:nth-child(2) td {
  outline: 1px dotted blue;
  outline-offset: -1px;
}

/* border */
table.bordered tr:nth-child(1) td {
  border: 1px solid blue;
}
table.bordered tr:nth-child(2) td {
  border: 1px dotted blue;
}

＆＃13;

<p>
  Outline
</p>
<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

<p>
  Border
</p>
<table class='bordered'>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;