使用Firefox无法正确呈现TD边框

时间:2016-02-05 14:30:03

标签: html css windows firefox dpi

在向Firefox开发团队报告错误之前,请更好地检查是否存在代码问题...这是tabletable { border-collapse: collapse; font-size: 1em; } th { background-color: #a0a0d8; font-weight: bold; width: 20em; } th, td { border: 1px solid #8080b8; padding: 2px; } css样式的fiddle。 CSS非常简单:

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

可悲的是,没有任何缩放,我显示了enter image description here显示的不规则边框。

我是否犯了一些错误,或者是否应该报告这个问题(没有找到关于缩放的报告)?

注意:向前或向后缩放可以获得某些系数的正常边界。

修改:这是请求的HTML:

                if(root.path("retweeted_status").path("place").path("bounding_box").get("coordinates") != null){
                    lon = root.path("retweeted_status").path("place").path("bounding_box").path("coordinates").get(0).get(0).textValue();
                    lat = root.path("retweeted_status").path("place").path("bounding_box").path("coordinates").get(0).get(1).textValue();

                    if(root.path("retweeted_status").path("place").get("full_name") != null) {
                        userlocation = root.path("retweeted_status").path("place").get("full_name").textValue();
                    }
                }

编辑2:使用FireFox 44,Windows Seven Pro测试。

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

编辑4 120DPI根据Windows,166根据DPILove ...

1 个答案:

答案 0 :(得分:2)

看起来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