CSS Border-collapse 结合虚线边框

Question

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

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

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

这是一个有足够容易实施解决方案的已知问题吗？

---

图1：

图2：

---

请注意我为此使用表格

请不要向我发送垃圾邮件“你不应该使用表格进行布局” - 我完全清楚这一点。

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

1. 该网站内置于 Business Catalyst（一个内容管理系统）中，客户需要能够使用系统中的 WYSIWYG 编辑器轻松添加单元格以获取额外内容等。
2. 这个特定项目的截止日期非常紧迫，因此需要尽快构建（表格使它更快一点，尤其是所有页面都具有不同的单元格数量、宽度、高度等）。李>

Answer 1

border-collapse 是你的罪魁祸首。

我遇到了这个问题，底部虚线边框是一个表格（实际上是一个表格，而不是布局）。

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

任何有边框的，设置边框；

然后为没有边框的任何东西设置边框宽度为 0px。

这应该可以让您使用 Chrome。

Answer 2

Jon P 提出了一个很好的观点，即您真的不应该使用表格进行布局。话虽如此，我知道有时这是必要的。

从外观上看，chrome 的问题在于 td 的 colspan，这对于表格布局来说更加不利。

推荐：

不要在底部使用 colspan 只设置特定的边框左边框：无； 对于第一个人创建一个新表并将该表上的宽度设置为与原始表相同，设置新表和原始表上最后一列的宽度，然后确保设置border-top：none对于原始表格的第一行。

或者更好的是转换为 div 布局。如果您有兴趣转换，请告诉我，我很确定我可以在大约 20-30 分钟内完成。

至于 IE 在默认模式下 IE9 中一切正常，在兼容模式 (IE8) 下看起来底部的第一个 colspan 有问题。

/--- 编辑---/

如果您允许客户端修改代码（完全可以接受），那么您实际上只有几个选项，因为这是浏览器的渲染问题。

1. 向站点添加 javascript 文件或向站点上的 .js 文件添加 javascript 代码，以解析 DOM 并向任何具有处理边框的 colspan 属性的 td 添加样式；
2. 为客户想要使用 colspan 的任何时间创建一个令牌（不理想）；
3. 让他们知道问题所在并切换到实心边框；
4. 不要使用边框使用精灵样式的虚线边框图片

我认为这些解决方案中的任何一个都不是真正理想的，但是当您让客户修改网站时，您会在出现问题时限制自己。

Answer 3

将border-top 和border-left 设置为1px，右下角为空。然后为容器添加右边框和下边框。

p.s.：不要使用表格进行布局，除非您正在布置真正的表格！它对渲染速度有非常糟糕的影响，它不能跨浏览器（与大多数人的想法和说法相反）并且难以维护。