Chrome浏览器上的奇怪边框

Question

我在HTML中有以下表格

<table class="print-table">
  <tbody>
    <tr>
      <td class="border-top border-bottom border-left" colspan="2">1</td>
      <td class="border-top border-bottom border-left">4</td>
      <td class="border-top border-bottom border-right">5</td>
    </tr>
    <tr>
      <td colspan="4">&nbsp;</td>
    </tr>
    <tr>
      <td class="border-top border-bottom border-left border-right" colspan="2">6</td>
      <td colspan="2">9</td>
    </tr>
  </tbody>
</table>

css如下

.print-table {
    width: 700px;
    /*border-spacing: 0;*/
    border-collapse: collapse;
}

    .print-table td {
        padding: 2px;
    }

.border-top {
    border-top: 1px solid #000;
}

.border-bottom {
    border-bottom: 1px solid #000;
}

.border-left {
    border-left: 1px solid #000;
}

.border-right {
    border-right: 1px solid #000;
}

在Chrome 33.0.1750.146 m上，它显示如下 单元格6的顶部边框不应该在那里

在Firefox 27和IE 11上，两者都正确渲染

这是Chrome的错误吗？请帮忙 http://plnkr.co/edit/DHQFLmkWrQfl7tYqJZJl?p=preview

更新 问题是边界冲突，并在此处记录 http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution

Answer 1

这是因为浏览器中折叠边框模型的不同解释。当您使用colspan以及崩溃时会出现问题。

一种方法是不使用崩溃，另一种方法是删除colspan。在这里看第二种方式html。我从第二行删除了colspan。

JSFiddle http://jsfiddle.net/sajith/KVcLG/

<table class="print-table">
  <tbody>
    <tr>
      <td class="border-top border-bottom border-left" colspan="2">1</td>
      <td class="border-top border-bottom border-left">4</td>
      <td class="border-top border-bottom border-right">5</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td class="border-top border-bottom border-left border-right" colspan="2">6</td>
      <td colspan="2">9</td>
    </tr>
  </tbody>
</table>

Answer 2

您遇到问题的原因如下：

.print-table {
border-spacing: 0;
/* border-collapse: collapse; */
}

从border-collapse: collapse;

中删除或注释掉.print-table

Answer 3

从我测试过的.print_table类中有一个border-collapse：collapse属性，它也存在于bootstrap中。我建议从边界崩溃改变这个：崩溃到边界崩溃：继承

.print-table {
    width: 700px;
    /*border-spacing: 0;*/
    border-collapse: inherit;
}