table单元格边框溢出延伸到相邻边框bug记录_出现在chrome中border-collapse: collapse

程序员 2019-07-07 阿举

近一年没有更新了，记录下一个特殊bug吧。两个月前遇到的，这个问题只在一篇文章中搜索到，也和这篇文章作者邮件交流了，目前该bug无法解决，文章Chrome 中 table 布局的的重叠边框 bug 我用我的方式记录下来，为这个问题贡献另一份文章，如果你有解决方法，欢迎联系我

1、在实际项目中触发了这样一个问题，给一个合并的单元格设置了边框，但是旁边的单元格却也出现了边框线，然后将研究半天，将代码量缩小，还是没看得出来，最后在同事的帮助下，发现是我给table设置了border-collapse: collapse属性，设置这个是为了单元格的之间的边框成细边框，没有重叠感。下图为bug图

发现问题后再次精简的源代码在线预览示例

<style>
        table{border-collapse: collapse;}
        table tr td{width: 100px}
        table tr{height: 24px}
</style>

<table>
    <tbody>
    <tr>
        <td></td>
        <td rowspan="2" colspan="2" style="border: 1px solid red">设置边框线</td>
        <td rowspan="2" colspan="2">没有边框线</td>
    </tr>
    <tr>
        <td></td>
    </tr>
    <tr>
        <td rowspan="1" colspan="2">这是一个合并单元格</td>
        <td rowspan="1" colspan="3">这是一个合并单元格</td>
    </tr>
    </tbody>
</table>

2、可以看出这代码很简单，完全看不出这怎么会有问题，在没发现是border-collapse: collapse引起之前，搜索了半天百度单元格边框溢出类似词无果，在一个前端群询问，有个别回答也无果。等发现border-collapse: collapse造成后，就想怎么解决，于是开始用谷歌搜索border-collapse: collapse，翻了三四页后终于看到文章开头处我说的那个作者的文章了，以下引用那篇文章部分内容。

没错，这次不是我们的问题，是 chrome 的问题

出现条件
这个 bug 的出现须满足以下两个条件：

table元素的 CSS 写了 border-collapse: collapse，这个属性表示表格的单元格( 和

)的 border 会 collapse （重叠），即拥有和 margin collapse 一样的现象: 两条相邻的 border 会合并成一条。
使用了colspan属性。
举个例子：上图 Option5 这个

就使用了colspan="2"，代表这个

占据两列。这时候，Option5 的上下 border 都有几率发生奇怪的现象。

原理
我们不知道他出现的根本原理，因为 chrome 开发人员也不知道。

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.

翻译:
这个 bug 我们早就知道了，但是太麻烦了我们不想改。

3、没想到是谷歌浏览器的bug，，于是我用上面的示例代码用ie或者火狐打开就是正常的。。我认为必触发的情况为：设置的边框单元格为合并单元格，并且下方相邻也是合并单元格，下方的单元格位置不完全对称上方的，这时就会溢出延伸到右侧单元格。而chrome开发人员认为想要修复这个bug，是个重大的任务，还不清楚原作者是怎么找到这段话的。文章中提到了解决方案，但是我测试后并没有效果，于是写了邮件给作者，很高兴的是作者回复了我，交流到最后，作者也认为那个解决方法并不对了。我不用border-collapse: collapse是不可能的，解决也是不可能的。。

没办法了，只想出绕过的方法，项目不同，方法不一定通用，有些项目或许可以放弃使用border-collapse: collapse，或者改为div模拟。我绕过的方法就是，在触发的单元格的下方一行tr都不使用合并单元格，用最低高度tr隔开上下tr中的合并单元格，但是这样不能table所有单元格使用边框线，否则会很奇怪

代码修改后如下

<tbody>
    <tr>
        <td></td>
        <td rowspan="2" colspan="2" style="border: 1px solid red">设置边框线</td>
        <td rowspan="2" colspan="2">没有边框线</td>
    </tr>
    <tr>
        <td></td>
    </tr>
	<tr style="height:1px">
        <td></td>
		 <td></td>
    </tr>
    <tr>
        <td rowspan="1" colspan="2">这是一个合并单元格</td>
        <td rowspan="1" colspan="3">这是一个合并单元格</td>
    </tr>
    </tbody>

结语：在这个过程中，直到搜索到这篇文章，也没想过是浏览器的问题，或许当时使用另一个浏览器，就会联想到兼容问题了。没想到会触发到chrome底层的bug，第一次遇到，这其中搜索问题的词很关键，搜索引擎也有影响，遇到搜索一个问题，连续打开几篇内容是相同时真是无语了。大站采集的内容是收录的快，排名高，但采集后源站内容格式，图片，结构可能就变了，也难以联系到原作者，而小站不给搜索词排名，有不同观点内容的不展示，至少收录下，翻十页找也行。。