12

我有这段要设置样式的 HTML。html 是一个表格（和实际表格），我想给它一个边框。该元素还有一个 :before 伪元素，我用它在顶角放置一个小三角形。

JSFiddle 在这里。我希望这是有道理的。我尽可能地去掉了标记和 CSS，因为它实际上只是一个大网站的一小部分。

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

现在的问题是，有 2 列的组合，border-collapse: collapse;在 table 和: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/

4

3 回答 3

2

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

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

Border-collapse: IE8 不支持单独的，但我认为这将是。

  • 编辑：没关系；）
于 2013-09-17T07:54:13.763 回答
0

我能想到的唯一合理的解释是与in模式pseudo-element :before不兼容。这就是解决问题的原因。突然，浏览器可以显示顶部边框而不关心伪元素。display: tabletablecollapsedborder-collapse: separate;

如果仔细观察，可以清楚地看到边框缺失的部分是第二列的宽度。如果将其更改为after伪元素，则右下角的边框会丢失，这也是由于表格和伪元素的边框被折叠了。

如果您将border-bottomof更改th为3px solid red处于collapsed模式，则th压倒table并且边框为红色。我想，权力after和before遵循同样的规则。如果更了解规格的人来回答这个问题，那就太好了。

这样想，我不相信除了：

  • 使用单独的边框
  • 将伪元素放在父元素上div

我检查的pseudo element是实际呈现为blockand 可以更改为tableand list-item。但是，这些都不会改变行为。

非常随机的东西，实际上符合 Av Avt 关于伪元素在 DOM 方面的呈现位置的回答。

如果我附加:beofre这样的内容，边框将保持不变：

.thumb.tright table.infobox.vcard tr:before

显然，它创建的新伪元素与行数一样多。

于 2013-09-13T22:57:58.160 回答
0

我认为这是一个只发生在 Webkit 浏览器上的问题。它可以被认为是一个“浏览器错误”imo。

th 应该在里面，而不是 tbody：

<thead>
        <tr>
            <th colspan="2" class="fn org" style=""> Example text</th>
        </tr>
</thead>
<tbody>
        <tr>
            <th>Row head</th>
            <td>Content</td>
        </tr>
<tbody>

我认为这是正确的解决方案。您将元素放置在不建议放置的位置，因此出现问题应该是正常的。

编辑：正如三十点所指出的，将 th 更改为 td 不会改变结果。它仅在我将 th 移到 thead 部分时才有效。在这一点上我很茫然，我找不到解决这个问题的方法。

但至少我认为我可以对这个问题的原因提供我的猜测： :before 在目标元素内创建一个伪元素。我不知道什么样的元素，但我怀疑浏览器创建了一个 td. 如果这是真的，那么在渲染你的 html 之后应该是这样的：

<table>
       <td></td> /*the pseudo element*/
       <tbody>
                <tr>
                    <th colspan="2" class="fn org" style=""> Example text</th>
                </tr>
                <tr>
                    <th>Row head</th>
                    <td>Content</td>
                </tr>
        <tbody>
</table>

不用说这看起来很奇怪。如果您尝试上面的 html，您会看到结果与您的问题相似。border-collapse:collapse 将 2 个边框合并在一起，其中有 2 个单元格彼此相邻，或者一个单元格位于表格边框旁边。所以我怀疑在这种情况下，伪元素 - 没有适当的 colspan - 最后只有 1 列，该行的其余部分是空的：什么都没有。这是我认为导致错误的地方：因为那里的表格边框旁边没有单元格，所以根本没有创建边框。

真正的原因可能稍微复杂一点（“为什么我放入一个thead 时不会出现错误？”），但我认为我的答案并不太离谱。:)

于 2013-09-13T22:27:07.747 回答