Ошибка 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>
Ответы 6
О возможном обходном пути: поскольку вам нужна видимость: скрытая, а не отображаемая: нет, я предполагаю, что важно, чтобы таблица оставалась того же размера. Я боюсь, что установка границы не может это изменить.
Если вы знаете, что хотите видеть белый прямоугольник, безопаснее установить белый цвет границы. Конечно, если у вас есть фон, который вы хотите видеть сквозь скрытую таблицу, это не сработает.
Если бы вы не использовали абсолютное позиционирование, я бы предположил, что сохранение размера div при скрытии оставалось для вас тем же самым. Однако, поскольку вы используете абсолютное позиционирование, вы можете просто использовать
display: none;
И это будет делать то же самое (проверено в IE7).
При использовании видимости: скрытый элемент, который вы скрываете, занимает то же место на экране, как если бы он все еще был там. Когда вы используете display: none, это почти как если бы он был удален из DOM.
Первоначальная проблема, которую вы видите, может быть ошибкой IE.
Решение, которое я нашел, состоит в добавлении верхнего / левого угла для перемещения рендеринга за пределы экрана, что защищает нас от ошибок IE такого рода. В приведенном выше примере это означает, что вы должны определить CSS для класса hide как:
.hide {
visibility: hidden;
position: absolute;
top: -10000px;
left: -10000px;
}
Подробнее на: Обходной путь для отображения границ таблицы в IE
Это ошибка IE. Firefox не распознает «границу-коллапс», используя вместо этого «границу-интервал», что не вызывает этой проблемы. Решение с использованием «display: none» работает, но есть и другая возможность. Если свойство видимости установлено с помощью Javascript, тогда граница также скрыта (как и ожидалось).
Почему он не скрывает его должным образом при использовании таблицы стилей, но это происходит, когда вы устанавливаете стиль с помощью Javascript?
Firefox не поддерживает border-collapse? Конечно, есть (en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%2 9); вы должны иметь в виду что-то другое. Вы предлагаете вместо этого использовать border-spacing, но как будет выглядеть код? Не стесняйтесь форкнуть этот jsFiddle для тестирования: jsfiddle.net/avernet/BYgZf.
Другой возможный обходной путь - добавить «filter: alpha (opacity = 100);» в стиль стола.
Большое спасибо, это устранило связанную проблему, с которой я столкнулся с iframe, оставившим призрак в IE, когда содержащий div отключил видимость.
Основываясь на этих разных комментариях, я решил эту проблему, разместив этот класс 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.
Большое спасибо за советы;)
В этом случае установите цвет границы на
transparent.