Проблема CSS z-index: работает в Firefox, но не в Safari? - PullRequest
Новая
       47

Проблема CSS z-index: работает в Firefox, но не в Safari?

0 голосов
/ 30 сентября 2010

Я пытаюсь показать конкретную строку таблицы поверх оверлея.Это работает в 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?

Ответы [ 2 ]

4 голосов
/ 05 октября 2010

Согласно CSS 2.1 спецификациям :

Влияние 'position :lative' на группу строк таблицы, группу заголовков таблицы, группу нижнего колонтитула таблицы, строку таблицы, группу столбцов таблицы, столбец таблицы, ячейку таблицы и таблицу -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>
0 голосов
/ 30 сентября 2010

Safari и Firefox используют разные механизмы рендеринга, что объясняет, почему они ведут себя по-разному в этом случае.Safari использует WebKit, а Firefox использует Gecko.

...