Chrome浏览器的奇怪边框答案

【问题标题】：Weird border on Chrome browserChrome浏览器的奇怪边框
【发布时间】：2014-03-06 13:52:22
【问题描述】：

我有下面的 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

【问题讨论】：

标签： html css google-chrome border

【解决方案1】：

这是因为浏览器中对折叠边框模型的不同解释。当您将 colspan 与折叠一起使用时会出现问题。

一种方法是不使用collapse，另一种方法是删除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>

【讨论】：

【解决方案2】：

您的问题原因如下：

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

从.print-table 中删除或注释掉border-collapse: collapse;

【讨论】：

我确实需要把它们折叠起来

【解决方案3】：

从我测试的结果来看，您的 .print_table 类有一个border-collapse:collapse 属性，该属性也存在于引导程序中。我建议将它从border-collapse:collapse 改为border-collapse:inherit

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

【讨论】：

我没有使用引导程序