IE CSS ошибка: граница таблицы показывает div с видимостью: скрытый, позиция: абсолютная - PullRequest
Новая
       14

IE CSS ошибка: граница таблицы показывает div с видимостью: скрытый, позиция: абсолютная

8 голосов
/ 10 января 2009

выпуск

У меня есть <div> на странице, которая изначально скрыта с visibility: hidden; position: absolute. Проблема заключается в том, что если скрытый таким образом <div> содержит таблицу, которая использует border-collapse: collapse и для которой установлены ячейки с границей, эта граница по-прежнему показывает "сквозь" скрытый <div> в IE.

Попробуйте сами, запустив приведенный ниже код на IE6 или IE7. Вы должны получить белую страницу, но вместо этого вы увидите:

альтернативный текст http://img.skitch.com/20090110-enuxpb5aduqceush46dyuf4wk7.png

Возможное решение

Поскольку это происходит в IE, а не в других браузерах, я предполагаю, что это ошибка IE. Один из обходных путей - добавить следующий код, который переопределит границу: 

.hide table tr td {
    border: none;
}

Мне интересно:

  • Это известная ошибка IE?
  • Есть ли более элегантное решение / обходной путь?

код 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css">

            /* Style for tables */
            .table tr td {
                border: 1px solid gray;
            }
            .table {
                border-collapse: collapse;
            }

            /* Class used to hide a section */
            .hide {
                visibility: hidden;
                position: absolute;
            }

        </style>
    </head>
    <body>
        <div class="hide">
            <table class="table">
                <tr>
                    <td>Gaga</td>
                </tr>
            </table>
        </div>
    </body>
</html>

Ответы [ 6 ]

5 голосов
/ 04 февраля 2010

Это ошибка IE. Firefox не распознает «border-collapse», используя вместо этого «border-spacing», что не вызывает этой проблемы. Решение использовать «display: none» работает, но есть и другая возможность. Если свойство видимости установлено с использованием Javascript, то граница также скрыта (как и ожидалось).

3 голосов
/ 25 марта 2009

Если бы вы не использовали абсолютное позиционирование, я бы предположил, что сохранение размера div, когда он скрыт, остается для вас таким же важным. Однако, поскольку вы используете абсолютное позиционирование, вы можете просто использовать 

display: none;

И это тоже самое (проверено в IE7).

При использовании видимости: скрытый скрытый элемент занимает то же место на экране, как если бы он был там. Когда вы используете display: none, это почти как если бы он был удален из DOM.

Исходная проблема, которую вы видите, может быть ошибкой IE.

2 голосов
/ 08 июня 2011

Другой возможный обходной путь - добавить «фильтр: альфа (непрозрачность = 100);» в стиле стола.

2 голосов
/ 11 ноября 2009

Решение, которое я нашел, состоит в добавлении верхнего / левого угла для перемещения рендеринга за пределы экрана, что защищает нас от ошибок IE такого рода. В приведенном выше примере это означает, что вы должны определить CSS для класса hide как: 

.hide {
    visibility: hidden;
    position: absolute;
    top: -10000px;
    left: -10000px;
}

Подробнее: Обходной путь для границ таблицы, просматриваемых в IE

0 голосов
/ 09 августа 2011

Основываясь на этих разных комментариях, я решил эту проблему, добавив этот класс CSS в свой основной лист CSS: 

.hidden {
    position: absolute;
    visibility: hidden;
}

А эти строки в листе CSS, посвященном IE (включены через хак на html-странице): 

table.hidden, .hidden table {
    visibility: hidden;
    position: absolute;
    border-collapse: separate;
    left: -1000px;
    top: -1000px;
}

Это прекрасно работает для меня сейчас на IE8.

Большое спасибо за ваши советы;)

0 голосов
/ 10 января 2009

Ваш возможный обходной путь: так как вы хотите, чтобы видимость: скрытая и не отображалась: нет, я предполагаю, что важно, чтобы таблица оставалась того же размера. Боюсь, что установка границы на none может изменить это.

Если вы знаете, что хотите видеть белый прямоугольник, вместо этого безопаснее установить цвет границы на белый. Конечно, если у вас есть фон, который вы хотите видеть сквозь скрытую таблицу, он не работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...