html - TD 边框无法在 Firefox 中正确呈现

Question

在向 Firefox 开发团队报告错误之前最好检查它是否是代码问题...这里是 fiddle一个小的 table css 样式。 CSS 非常简单:

table {
  border-collapse: collapse;
  font-size: 1em;
}

th {
  background-color: #a0a0d8;
  font-weight: bold;
  width: 20em;
}

th,
td {
  border: 1px solid #8080b8;
  padding: 2px;
}

遗憾的是，没有任何缩放，我得到了显示的不规则边框 .

我是不是犯了什么错误，或者这是一个应该报告的问题(没有找到关于缩放的报告)？

注意:向前或向后缩放会使某些系数的边界变得规则。

编辑:这里是请求的 HTML:

<div class="content">
  <table id="groups">
    <thead>
      <tr>
        <th class="groupes">Groupes</th>
        <th class="action add" title="Ajouter un nouveau groupe">+</th>
      </tr>
    </thead>
    <tbody>
      <tr id="new-group-tr" style="display: none;">
        <td>
          <input type="text" id="new-group-name">
        </td>
        <td class="action add" title="Valider la création du groupe">V</td>
        <td class="action cancel" title="Annuler">X</td>
      </tr>
      <tr title="Cliquer pour afficher le contenu du groupe « Aucun »">
        <td class="groupes">Aucun</td>
        <td class="action delete" title="Supprimer le groupe « Aucun »">X</td>
      </tr>
      <tr title="Cliquer pour afficher le contenu du groupe « Groupe_1 »">
        <td class="groupes">Group2</td>
        <td class="action delete" title="Supprimer le groupe « Groupe_1 »">X</td>
      </tr>
      <tr title="Cliquer pour afficher le contenu du groupe « New »">
        <td class="groupes">Group3</td>
        <td class="action delete" title="Supprimer le groupe « New »">X</td>
      </tr>
      <tr title="Cliquer pour afficher le contenu du groupe « Test »">
        <td class="groupes">Group4</td>
        <td class="action delete" title="Supprimer le groupe « Test »">X</td>
      </tr>
      <tr title="Cliquer pour afficher le contenu du groupe « Test 2 »">
        <td class="groupes">Group4</td>
        <td class="action delete" title="Supprimer le groupe « Test 2 »">X</td>
      </tr>
      <tr title="Cliquer pour afficher le contenu du groupe « Test 3 »">
        <td class="groupes">Group5</td>
        <td class="action delete" title="Supprimer le groupe « Test 3 »">X</td>
      </tr>
      <tr title="Cliquer pour afficher le contenu du groupe « Test 4 »">
        <td class="groupes">Group6</td>
        <td class="action delete" title="Supprimer le groupe « Test 4 »">X</td>
      </tr>
  </table>
</div>

编辑 2: 使用 FireFox 44、Windows Seven Pro 进行测试。

编辑 3: 屏幕为 120DPI (125%)。

编辑 4: 120DPI 根据 windows，166 根据 DPILove ...

Answer 1

看起来 Firefox 没有很好地呈现 border-collapse:collapse。

作为解决方法，您可以尝试使用 border-collapse:separate + border-spacing:0，并单独绘制边框。

table {
  border-collapse: separate;
  border-spacing: 0;
  border-left: 1px solid #8080b8;
}
th {
  border-top: 1px solid #8080b8;
}
th,
td {
  border-right: 1px solid #8080b8;
  border-bottom: 1px solid #8080b8;
}
th.action,
td.action {
  border: 0;
}

Updated jsFiddle