Question

我的问题似乎只会影响Safari和Chrome（又名WebKit）。我有一个覆盖整个屏幕的覆盖图，以及两个我希望显示在覆盖图顶部的表格行。页面上的其他所有内容都应显示在叠加层下方。

问题是Safari只在顶部显示一个表行。 Firefox正确显示两者。我似乎无法在Safari中找到此问题的根本原因，但我知道我不是唯一一个有“在Firefox中运行的Safari定位问题”的人。

为了在Firefox和Safari / Chrome中使用，我该怎么做？

<body>

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

    <table>
        <tr style="position:relative; z-index:1000;">
            <td>Displays on top in Firefox only</td>
        </tr>
        <tr>
            <td>
                <div style="position:relative; z-index:1000;">
                    Displays on top in both Safari and Firefox
                </div>
                <span class="ui-widget-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>

</body>

更新：显然上面的代码示例正确显示。但是，这只是一个样本。这不是实际的代码。 HTML是相同的，但我使用JavaScript动态应用样式。

也许问题在于jQuery？我正在使用此行将定位添加到第一个表行：

$(firstTableRow).css('position', 'relative').css('z-index', '1000');

在Firefox中（使用Firebug）我可以看到正在应用样式，但是在Safari中（使用Web Inspector）它表示该表行的“计算样式”静态定位，其z-index为auto，即使“样式属性”样式表示位置是相对的，z-index是1000。

screenshot

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="ui-widget-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>

Safari和Chrome CSS表行定位z-index问题（适用于Firefox）

1 个答案: