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

Проблема

У меня есть <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>

css internet-explorer
person avernet    schedule 10.01.2009    source источник

Ответы (6)


arrow_upward
5
arrow_downward

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

person Rex the Strange    schedule 04.02.2010
comment
Почему он не скрывает его должным образом при использовании таблицы стилей, но делает это, когда вы устанавливаете стиль с помощью Javascript? - person JAB; 07.06.2010
comment
Firefox не поддерживает border-collapse? Конечно, да (en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29< /а>); вы должны иметь в виду что-то другое. Вы предлагаете вместо этого использовать border-spacing в качестве обходного пути, но как будет выглядеть код? Не стесняйтесь разветвлять этот jsFiddle для тестирования: jsfiddle.net/avernet/BYgZf. - person avernet; 17.08.2011

arrow_upward
3
arrow_downward

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

display: none;

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

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

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

person jthompson    schedule 25.03.2009

arrow_upward
3
arrow_downward

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

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

Подробнее: Временное решение для границ таблицы, просвечивающихся в IE

person avernet    schedule 11.11.2009

arrow_upward
2
arrow_downward

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

person Xavier Young    schedule 08.06.2011
comment
Большое спасибо, это исправило связанную с этим проблему, с которой я столкнулся, когда iframe оставлял призрак в IE, когда содержащий его div отключал видимость. - person Ishmael; 18.04.2012

arrow_upward
0
arrow_downward

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

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

person buti-oxa    schedule 10.01.2009
comment
В этом случае установите цвет границы на transparent. - person nyuszika7h; 15.12.2010

arrow_upward
0
arrow_downward

Основываясь на этих различных комментариях, я решил эту проблему, добавив этот класс 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.

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

person gyzpunk    schedule 09.08.2011