Firefox無法正確顯示TD邊框

Question

在向Firefox開發團隊報告錯誤之前，最好檢查它是否是代碼問題。這是css樣式的小table的擺弄 。 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：根據Windows 120DPI，根據DPILove 166 ...

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;
}

更新了jsFiddle