Question

此示例以两种不同的方式显示两个表。在第一种情况下，一张桌子在另一张桌子之上。在第二个，它们是并排的。这两个案例之间的唯一区别是一个人使用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节说明了在崩溃边界模型中解决边界冲突：

如果没有一个样式被“隐藏”并且其中至少有一个不是“无”，那么将丢弃窄边框以支持更宽的样式。如果有几个具有相同的'border-width'，则按此顺序首选样式：'double'，'solid'，'dashed'，'dotted'，'ridge'，'outset'，'groove'和最低： '插页'。

这似乎在第一种情况下起作用，其中实心边界胜过表格边缘周围的虚线边界。但在第二种情况下，看起来两个边界都出现了，可能相隔一个像素。

截图：

Screenshot

我在Chrome 37.0和IE11中都观察到了这种行为。

浏览器错误或CSS功能？有没有办法让它在inline-block案例中正常运作？

注意：消除HTML标记之间的所有空白区域没有帮助。

Answer 1

为了使其正常运行，使用inline-table代替inline-block

<强> FIDDLE

另外，我认为除了

之外你不应该设置任何表元素

display:table，display:inline-table（或display:none - 如有必要）

- 否则事情就会陷入困境，因为你告诉桌子不再表现得像桌子了。

表边框折叠无法使用内联块？

1 个答案: