Chrome bug与colspan和边框？ [英] Chrome bug with colspan and border?

问题描述

在下面的示例中，右侧单元格顶部有一个边框。

HTML / CSS

  html，body {height：100％;}表{border-collapse：collapse;宽度：100％; height：100％;}。left {boundary-right：1px #aaaaaa solid; border-top：1px #aaaaaa solid;}  

 表> < tr> < td colspan = 2> top< / td> < / tr> < tr> < td class =left>左< / td> < td>右< / td> < / tr>< / table>  

示例

解决方案

成为相同的错误：

规则1：您不讨论边界冲突

边界样式在遇到冲突时获胜：

1. 边框样式的'在所有其他冲突边界。




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




3. 如果没有一个样式是隐藏的，并且至少有一个样式不是none，那么窄边框将被舍弃，以支持更宽的边框。如果几个具有相同的'border-width'，那么样式以这个顺序是首选：'double'，'solid'，'broken'，'dotted'，'ridge'，'outset'，' 'inset'。




4. 如果边框样式仅在颜色上不同，则在单元格上设置的样式将胜过一行， ，列，列组，最后，表。当相同类型的两个元素冲突时，则进一步向左（如果表的'direction'是'ltr';右边，如果它是'rtl'），并进一步到顶部胜利。

   li>
   

---

解决方法

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

  table {border-collapse：separate; / *默认选项* / 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> < tr> < td colspan =3>< / td> < / tr> < tr> < td>< / td> < td>< / td> < td>< / td> < / tr>< / table>  

  table {
 border-collapse：separate; / *默认选项* / 
 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 
} 
  

In the example below, there is a border on top of the right cell. It only appears in Chrome, is it a Chrome bug?

HTML / CSS

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

<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td>right</td>
  </tr>
</table>

Here is the example as a fiddle.

Chrome Screenshot

解决方案

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

<table>
  <tr>
    <td colspan=2>top</td>
  </tr>
  <tr>
    <td class="left">left</td>
    <td class="right">right</td>
  </tr>
</table>

I added this:

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

Which results in this in 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):

Here are the rules of border conflicts:

Rule 1: You do not talk about border conflicts

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

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

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.

---

Workaround

Here is a workaround, just don't use 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>
  <tr>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

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
}

这篇关于Chrome bug与colspan和边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！