CSS边框折叠与虚线边框结合使用

Question

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

整体效果很好，但在Chrome中存在一个小问题，其中两个折叠的虚线边框有时构成一个实心边框（图1）;可以在底部的Signatories page找到此示例。

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

这是一个易于实施解决方案的已知问题吗？

---

FIG1：

Fig2：

---

请注意我使用此表

请不要通过“你不应该使用表格进行布局”来欺骗我 - 我完全清楚这一点。

我有几个主要原因：

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

Answer 1

边界崩溃是你的罪魁祸首。

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

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

带边框的任何东西，设置边框;

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

这应该可以帮助你实现Chrome。

Answer 2

Jon P提出了一个很好的观点，你真的不应该使用表格进行布局。据说我理解有时候这是必要的。

从外观来看，Chrome中的问题在于td的colspan，这对于表格布局来说更加邪恶。

建议：

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

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

对于IE，IE9在默认模式下一切都很好看，在兼容模式（IE8）下，底部的第一个colspan看起来有问题。

/ ---编辑--- /

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

1. 将javascript文件添加到网站或将javascript代码添加到解析DOM的网站上的.js文件中，并将样式添加到任何具有处理边框的属性colspan的td;
2. 为客户想要使用colspan（不理想）的任何时候创建令牌;
3. 让他们知道问题是什么并切换到坚固的边框;
4. 不要使用边框使用精灵样式虚线边框图像

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

Answer 3

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

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