colspan和边境的Chromebug？-Chromebugwithcolspanandborder?

22  

This appears to be the same bug listed here (or similar)

这似乎与此处列出的相同错误（或类似）

An easy workaround is at the bottom of this answer.

一个简单的解决方法是在这个答案的底部。

This is a relevant comment under that bug report:

这是该错误报告下的相关评论：

It's a known (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn't deal correctly with spanning cells (we only consider the cell adjoining the first row / column in a row / column span). On top of that, our border granularity is determined by the cell's span.

这是我们的表代码中已知的（旧）问题。折叠边框是基于相邻单元格确定的，并且我们的代码无法正确处理生成单元格（我们只考虑与行/列跨度中的第一行/列相邻的单元格）。最重要的是，我们的边界粒度由单元格的跨度决定。

To fix this bug, we would need to overhaul our collapsing border code, which is a big undertaking.

为了解决这个问题，我们需要彻底检查崩溃的边界代码，这是一项艰巨的任务。

Here is an example that highlights the same problem:

这是一个突出显示相同问题的示例：

html,
body {
  height: 100%;
}
table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}
.left {
  border-right: 1px #aaaaaa solid;
  border-top: 1px #aaaaaa solid;
}
.right {
  border-top: double 20px #F00;
}

  

    
top
  
  

    
left
    
right
  

I added this:

我补充说：

.right { border-top: double 20px #F00; }

Which results in this in Chrome:

Chrome中的结果如下：

That grey border would not be between the double red border if it was not a bug.

如果它不是一个错误，那个灰色边框不会在双红色边框之间。

For comparison, this is how it should look (taken in Firefox):

为了比较，它应该是它的样子（在Firefox中拍摄）：

Here are the rules of border conflicts:

以下是边界冲突的规则：

Rule 1: You do not talk about border conflicts

规则1：你不谈论边界冲突

The following rules determine which border style "wins" in case of a conflict:

以下规则确定在发生冲突时哪种边框样式“获胜”：

1. Borders with the 'border-style' of 'hidden' take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

   具有“隐藏”边界风格的边界优先于所有其他冲突边界。具有此值的任何边框都会抑制此位置的所有边框。

2. Borders with a style of 'none' have the lowest priority. Only if the border properties of all the elements meeting at this edge are 'none' will the border be omitted (but note that 'none' is the default value for the border style.)

   风格为“无”的边框优先级最低。仅当在此边缘处遇到的所有元素的边界属性为“none”时，才会省略边框（但请注意，“none”是边框样式的默认值。）

3. If none of the styles are 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones. If several have the same 'border-width' then styles are preferred in this order: 'double', 'solid', 'dashed', 'dotted', 'ridge', 'outset', 'groove', and the lowest: 'inset'.

   如果没有一个样式是“隐藏的”并且其中至少有一个不是“无”，那么将丢弃窄边框以支持更宽的样式。如果有几个具有相同的'border-width'，则按此顺序首选样式：'double'，'solid'，'dashed'，'dotted'，'ridge'，'outset'，'groove'和最低： “插页”。

4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. When two elements of the same type conflict, then the one further to the left (if the table's 'direction' is 'ltr'; right, if it is 'rtl') and further to the top wins.

   如果边框样式仅在颜色上有所不同，那么在单元格上设置的样式将赢得一行中的一个样式，该样式将胜过行组，列，列组，最后是表格。当两个相同类型的元素发生冲突时，那么左边的元素就会发生冲突（如果表格的'方向'是'ltr';右边，如果是'rtl'）则进一步冲到最高胜利。

Workaround

Here is a workaround, just don't use border-collapse: collapse:

这是一个解决方法，只是不要使用border-collapse：collapse：

table {
  border-collapse: separate; /* the default option */
  border-spacing: 0; /* remove border gaps */
}
td {
  padding: 20px;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
}
td:first-child {
  border-left: solid 1px #CCC;
}
table {
  border-top: solid 1px #CCC
}

table {
  border-collapse: separate; /* the default option */
  border-spacing: 0; /* remove border gaps */
}
td {
  padding: 20px;
  border-right: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
}
td:first-child {
  border-left: solid 1px #CCC;
}
table {
  border-top: solid 1px #CCC
}

4  

Since its a Chrome-Bug let's think up a workaround. So far I only came up with one that involves changing the html:

由于它是一个Chrome-Bug让我们想出一个解决方法。到目前为止，我只提出了一个涉及更改html：

http://jsfiddle.net/5366whmf/24/

http://jsfiddle.net/5366whmf/24/

It adds another row:

它增加了另一行：

 
top
 
 
 
left
right