CSS Border-collapse 结合虚线边框

Question

我正在研究 the following website它使用虚线边框(应用于表格单元格)来包含大部分网站内容。

它总体上运行良好，但在 Chrome 中存在一个小问题，两个折叠的虚线边框有时会组成一个实线边框(图 1)；这方面的一个例子可以在 Signatories page 上找到在底部。

类似的效果也适用于 Internet Explorer，但是它更加一致，而不是线条是实线，似乎每个第 n 点都加倍(图 2)。

这是一个已知问题，可以很容易地实现解决方案吗？

---

图1:

图2:

---

关于我为此使用表格的注意事项

请不要用“你不应该使用表格进行布局”这样的垃圾邮件告诉我——我完全清楚这一点。

我这样做有几个主要原因:

1. 该网站是在 Business Catalyst(一种内容管理系统)中构建的，客户需要能够使用系统中的所见即所得编辑器轻松添加额外内容的单元格等。
2. 这个特定元素的截止日期非常紧迫，因此需要尽快构建(表格使它更快一些，尤其是所有页面的单元格数量、宽度、高度等各不相同)。<

Answer 1

border-collapse 是你的罪魁祸首。

我遇到了这个问题，底部带虚线的是一个表格(实际上是表格，而不是布局)。

首先，设置“border-collapse: separate;”

凡是有边框的，设置边框；

然后将没有边框的任何内容的边框宽度设置为 0px。

这应该可以帮助您使用 Chrome。