今天在实现一个表格布局的时候遭遇了 Chrome 的一个 bug。没错，这次不是我们的问题，是 chrome 的问题。
后文简要介绍这个 bug。
现象和出现条件
现象
table布局中，<td> 的 border 在一定条件下会有诡异的现象，如这个 codepen 所示，截图如下：
option 2 绿色的 border-bottom “延伸”到了 option3 下面去了。同样的，option 6 和 option 7 被选中时也会有类似的 Bug.
出现条件
这个 bug 的出现须满足以下两个条件：
table元素的 CSS 写了border-collapse: collapse， 这个属性表示表格的单元格(<td>和<th>)的 border 会 collapse （重叠），即拥有和 margin collapse 一样的现象: 两条相邻的 border 会合并成一条。- 使用了
colspan属性。
举个例子：上图 Option5 这个<td>就使用了colspan="2"，代表这个<td>占据两列。这时候，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 我们早就知道了，但是太麻烦了我们不想改。
如何解决
去掉两个条件之一呗，但显然，第二个条件是不能被去掉的，因为在一些情况下，我们就是需要某个单元格占据两列的宽度。
因而我们只能去掉第一个条件，与此同时，我们需要在<table> 处加一个cellspacing="0"的属性，以达到和border-collapse: collapse类似的效果。
如何解决(更新)
上面的解决方案使用了cellspacing="0"这个属性，但出于好奇我搜了一下cellspacing，想知道它的默认值，而后发现这个属性已经不被推荐使用了:
应该在 CSS 中使用 border-spacing: 0
后记
我刚看到这个现象的时候，在一瞬间直觉就告诉我这是 Chrome 的 bug 了。这个直觉从何而来呢？ 从张鑫旭大佬的书《CSS 世界》中得来的。说来惭愧，买回来这本书数月，还没开始看，但由于它在桌子上就随便翻了一下，看到了一个标题，了解 CSS 世界中的“未定义行为”。我并没有细看，只是扫了一眼，简而言之就是浏览器存在着许多未定义行为，毕竟 CSS 的各种组合太丰富了，程序员也不可能完全考虑到所有的情况。故未定义的行为可能会有各种奇怪的现象。