【发布时间】：2014-11-09 18:19:20
【问题描述】：
此示例以两种不同的方式显示两个表格。在第一种情况下，一张桌子在另一张桌子之上。第二，他们是并排的。两种情况的唯一区别是一种使用display: inline-block；此外，在第一种情况下，表格由<DIV> 和padding-bottom 分隔，在第二种情况下，它们由<SPAN> 和padding-right 分隔。
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE type="text/css">
table { border-collapse: collapse; border-style: solid; border-width: thin }
col { border-style: dotted; border-width: thin }
td { padding-left: 0.05in; padding-right: 0.05in }
</STYLE>
</HEAD>
<BODY>
<TABLE>
<COL><COL><COL><COL><COL><COL>
<TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</TABLE>
<DIV style="padding-bottom: 1em"></DIV>
<TABLE>
<COL><COL><COL><COL><COL><COL>
<TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</TABLE>
<DIV style="padding-bottom: 3em"></DIV>
<TABLE style="display: inline-block">
<COL><COL><COL><COL><COL><COL>
<TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</TABLE>
<SPAN style="padding-right: 3em"></SPAN>
<TABLE style="display: inline-block">
<COL><COL><COL><COL><COL><COL>
<TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</TABLE>
</BODY>
</HTML>
CSS2 规范的 17.6.2.1 谈到解决折叠边界模型中的边界冲突：
如果没有一个样式是“隐藏”的，并且至少有一个不是“无”，那么窄边框将被丢弃，取而代之的是宽边框。如果多个具有相同的“边框宽度”，则按以下顺序首选样式：“双”、“实线”、“虚线”、“点”、“脊”、“开始”、“凹槽”和最低的： '插入'。
这似乎在第一种情况下有效，实线边框胜过虚线边框，围绕桌子边缘。但在第二种情况下，似乎 both 边框都出现了，可能相隔一个像素。
截图：
我在 Chrome 37.0 和 IE11 中都观察到了这种行为。
浏览器错误或 CSS 功能？有没有办法让它在 inline-block 案例中正常工作？
注意：消除 HTML 标记之间的所有空白并没有帮助。
【问题讨论】：
-
如果这是重复的，请告诉我。我第一次尝试问这个时遇到了网络问题。
-
我刚刚在 Chrome 37.0 和 IE 11 中对此进行了测试，它的工作方式与预期的一样。 （不像你的截图）
-
@MårtenWikström 在什么系统上？我在一台 Windows 8 笔记本电脑上。奇怪的是它会有所作为，但你永远不知道。确切的 Chrome 版本是 37.0.2062.120。
-
尝试在 jsFiddle 中重新创建问题 - 您可能会在重新创建时发现问题。
-
@ajb 我也在 Windows 8 上，使用完全相同版本的 Chrome。
标签： html css html-table