Question

我使用::before伪元素从嵌套表中创建this pedigree diagram来构建连接字段的行。它在Chrome和Firefox中运行良好，但在Internet Explorer 11中，伪元素太短而且位置错误。

以下是相关的CSS：

#pedigree td:first-child {
    width: 8em;
    padding: 3px;
    position: relative;
}
tr.s > td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 50%;
    border: solid gray;
    border-width: 1px 0 0 1px
}
tr.d > td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 50%;
    width: 2px;
    height: 50%;
    border: solid gray;
    border-width: 0 0 1px 1px
}

每个伪元素应该是其包含<td>的高度的一半; .s下半部分，.d上半部分。这对伪元素一起形成[形状。

在Chrome和Firefox中，top，bottom和height被解释为<td>高度的百分比。在IE中，它们似乎被解释为<td>顶部与其内容顶部之间距离的百分比。

如何让IE中的外观与其他浏览器相匹配？

Answer 1

表格元素的行为与标准框格不同。有些属性没有为这些元素正式定义（如position）。有些浏览器实现了它们，有些浏览器没有。因此，你会得到奇怪/不同的行为。

只需在div中使用包装td，并将所有样式（以及伪元素）应用于此包装器。您的表格也需要指定 height 。

见这里：https://jsfiddle.net/8dhwqvyj/1/

<强> HTML：

[...]
<td>
    <div class="td-wrapper">
        <div class="td-content">
            <!-- cell content -->
        </div>
    </div>
</td>
[...]

<强> CSS：

table[data-level="0"] { height: 400px; }
table[data-level="1"] { height: 200px; }
table[data-level="2"] { height: 100px; }
table[data-level="3"] { height: 50px; }
table[data-level="4"] { height: 25px; }

#pedigree td:first-child > .td-wrapper {
    width: 10em;
    padding: 3px;
    position: relative;
}
td > .td-wrapper > .td-content {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
tr.s > td:first-child > .td-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 2px;
    height: 50%;
    border: solid gray;
    border-width: 1px 0 0 1px
}
tr.d > td:first-child > .td-wrapper::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 50%;
    width: 2px;
    height: 50%;
    border: solid gray;
    border-width: 0 0 1px 1px
}

Internet Explorer中:: before伪元素的位置和大小

1 个答案: