Question

我正在尝试在叠加层顶部显示特定的表格行。它在Firefox中运行，但不适用于Safari。我不明白这是怎么可能的，因为Firefox和Safari通常会使这些类型的东西变得相同。

<body>

    <style>
        .overlay {
            position:absolute;
            width:100%;
            height:100%;
            background:#000;
            opacity: 0.5;
        }
    </style>

    <table>
        <tr style="position:relative; z-index:1000; background:#fff;">
            <td>show this one on top</td>
        </tr>
        <tr>
            <td>Show these below</td>
        </tr>
        <tr>
            <td>Show these below</td>
        </tr>
        <tr>
            <td>Show these below</td>
        </tr>
    </table>

    <div class="overlay"></div>

</body>

这会导致Safari和Firefox之间出现这种差异吗？

Answer 1

根据CSS 2.1 specifications：

'position：relative'对table-row-group，table-header-group，table-footer-group，table-row，table-column-group，table-column，table-cell和table的影响-caption元素未定义。

我假设Firefox以一种方式实现它，而WebKit以不同的方式实现它，并且两者都是正确的，因为它是未定义的。这里故事的寓意不是指定表格元素的位置。

我能够通过用div包装每个表格单元格的内容并定位div来使其工作。我还将叠加层移动到我所定位的表格行内（不确定是否有必要）。

<table>
    <tr>
        <td>
            <div style="position:relative; z-index:1000;">
                Displays on top in both Safari and Firefox
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="position:relative; z-index:1000;">
                Displays on top in both Safari and Firefox
            </div>
            <span class="overlay"></span>
        </td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
    <tr>
        <td>Displays below overlay</td>
    </tr>
</table>

Answer 2

Safari和Firefox使用不同的渲染引擎，这可以解释为什么它们在这种情况下表现不同。 Safari使用WebKit，而Firefox使用Gecko。

CSS z-index问题：适用于Firefox，但不适用于Safari？

2 个答案: