:之前伪元素导致边界间隙

Question

我有这个HTML格式,我想要样式.html是一个表(和实际表),我想给它一个边框.该元素还有一个:before伪元素,我用它在顶角放一个小三角形.

JSFiddle就在这里.我希望这是有道理的.我尽可能地删除了标记和CSS,因为它实际上是一个大网站的一小部分.

http://jsfiddle.net/GolezTrol/28yDb/2/

现在的问题是,具有2个列,具有border-collapse: collapse;在表和:before伪元素上的组合,导致元素的顶部边界部分消失.它仅存在于第一列的长度.

你会假设它是位于边框顶部的伪元素,但是这个元素非常小,据我所知,这可能不是问题所在.我添加visibility: hidden;到伪元素是肯定的,我可以告诉三角形消失了,但边框仍然不完整.

不幸的是我无法更改标记,因为这是由MediaWiki输出的,但我确实可以完全控制CSS.

HTML:

<div id="globalWrapper">
<div id="column-content">
<div class="thumb tright">
<table class="infobox vcard" style="">
    <tbody>
        <tr>
            <th colspan="2" class="fn org" style=""> Example text</th>
        </tr>
        <tr>
            <th>Row head</th>
            <td>Content</td>
        </tr>

CSS:

/* Generic table styling */
table {
  border-collapse: collapse;
  /*border-spacing: 0;*/ }

/* The box */
.thumb.tright table.infobox.vcard {
    border: 3px solid #fae104;
    position: relative;
}

/* Triangle */
  .thumb.tright table.infobox.vcard:before {
    content: "";
    position: absolute;
    width: 0;
    height: 1px;
    border-top: 5px solid transparent;
    top: -7px;
    border-left: 10px solid #555;
    visibility: hidden;
    right: -1px; }

我已经发现它在我删除时有效border-collapse: collapse;,但我不确定这是一个正确的解决方案,即使它是,我真的想要解释发生了什么.

顺便说一句.我在Chrome 29和Internet Explorer 10中都遇到了这个问题.没有测试过其他浏览器.

更新

我没有使用 - 或者不使用'border-collapse'来解决问题,而是发现这也有效:

.thumb.tright table.infobox.vcard tbody {
    display: block;
}

所以表本身仍然是一个表,伪元素仍然在桌子上,边框,定位等等.之前没有样式的tbody现在是一个块,问题在两个浏览器中都得到了解决.我通过反复试验找到了这个,但仍然不知道背后的原因.

更新小提琴:http://jsfiddle.net/GolezTrol/28yDb/9/

Answer 1

作为 StackOverflow和jsFiddle的新手，我更新了 Fiddle，我认为这是解决方案。除了将伪类从表本身移动到表头，并将其更改为 :after 之外，我没有更改 CSS。在 Firefox 和 Chrome 中适用于我！

/* Triangle */ 
.thumb.tright table.infobox.vcard th:after { }

IE8 不支持 Border-collapse: seperate，但我认为会支持。

• 编辑：没关系；）