我有这件我想要的 HTML样式.
html是一个表(和实际的表),我想给一个边框.
该元素还有一个：在伪元素之前,我用来在顶角放一个小三角形.

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

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

现在的问题是,具有2列,具有边框崩溃：崩溃的组合;在表上和：在伪元素之前,导致元素的顶部边框部分消失.只有第一列的长度.

你会假设它是在边框顶部的伪元素,但这个元素很小,据我所知,这不是问题.我增加了可见性：隐藏;到伪元素可以肯定,我可以告诉三角形已经走了,但边框还不完整.

不幸的是,我不能更改标记,因为这是由MediaWiki输出,但我完全控制了CSS.

HTML：

@H_502_17@<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：

@H_502_17@/* 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; }

我已经发现,当我删除边框崩溃时,它可以工作：崩溃,但我不知道这是一个正确的解决方案,即使是这样,我真的想解释发生了什么.

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

更新

而不是使用 – 或者不使用’border-collapse’来解决问题,我发现这也是有效的：

@H_502_17@.thumb.tright table.infoBox.vcard tbody { display: block; }

所以表本身仍然是一个表,伪元素仍然在表上,边框,定位等.以前没有进行过的tbody现在是一个块,问题在两个浏览器中都被解决了.我通过反复尝试发现了这一点,仍然不知道它背后的原因.

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