CSS边框合并与虚线边框的配合使用

Question

我正在处理 以下网站，该网站使用虚线边框（应用于表格单元格）来容纳大部分网站内容。总体上它表现良好，但在Chrome浏览器中有一个小问题，两个折叠的虚线边框有时会形成一个实心边框 (图1)；可以在底部的签署者页面上找到此类示例。Internet Explorer也存在类似的效果，不过它更加一致，并且与其说是实线，不如说每个第n个点都是双重的 (图2)。这是一个已知的问题吗？是否有易于实现的解决方案？

关于我使用表格的说明

请不要用“您不应该使用表格进行布局”的信息轰炸我-我完全意识到这一点。我这么做有几个主要原因：

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

- Marty

---

我必须说：使用表格进行布局是非常不好的。https://dev59.com/K3VD5IYBdhLWcg3wHnwX，http://www.hotdesign.com/seybold/，http://phrogz.net/css/WhyTablesAreBadForLayout.html - Jon P

Answer 1

border-collapse是罪魁祸首。

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

首先，设置"border-collapse：separate;"

对于任何具有边框的元素，请设置边框；

然后，对于没有边框的任何元素，请将边框宽度设置为0px。

这样应该可以解决Chrome中的问题。

- Martinator

Answer 2

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

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

建议：

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

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

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

/ ---编辑--- /

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

1. 将一个javascript文件添加到网站上，或者在网站上添加一个javascript代码到.js文件中，解析DOM并为任何具有colspan属性的td添加样式来处理边框；
2. 为每次客户端想要使用colspan创建一个令牌（不是理想的解决方案）；
3. 告诉他们问题所在并切换到实线边框；
4. 不要使用边框，使用精灵样式的虚线边框图片。

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

- CBRRacer

Answer 3

将border-top和border-left设置为点状1像素，右侧和底部设置为无。然后将右侧和底部边框添加到容器中。

附：除非您正在布置真正的表格，否则不要使用表格进行布局！它对渲染速度有非常不良的影响，它不是跨浏览器的（与大多数人认为和说的相反），而且很难维护。

- c69

---

谢谢您的回答，然而在我的情况下，为每个单元格应用独特的样式以避免边框碰撞并不是一个可行的解决方案。 - Marty