IE6: высота "1em минус 1px" - PullRequest
Новая
       19

IE6: высота "1em минус 1px"

1 голос
/ 30 апреля 2010

Мне нужен div с высотой ровно 1em минус 1px. Это может быть достигнуто в большинстве браузеров, как это: 

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">

        .helper {
            /* background-color: black; */

            position: absolute;
            top: 5em;
            left: 5em;

            width: 2em;
            height: 1em;
        }
        .target {
            background-color: #89f;

            position: absolute;
            top: 0;
            bottom: 1px;

            width: 100%;
        }           
    </style>
</head>
<body>
    <div class="helper">
        <div class="target"></div>
    </div>
</body>
</html>

«Целевой» div имеет желаемую высоту. Проблема в том, что это не работает в IE6, потому что он игнорирует атрибут bottom, когда установлен top (общеизвестная проблема).

Есть ли обходной путь для IE6 (возможно, с несколькими вложенными div, с границами / отступами / полями / чем угодно) или JavaScript будет единственным решением?

Обратите внимание, что я не могу использовать Quirks Mode.

Ответы [ 2 ]

2 голосов
/ 02 мая 2010

Должен ли target div быть физически на 1 пиксель меньше или просто отображать на 1 пиксель меньше?

Самый простой способ - добавить таблицу стилей "ie6 only": 

.helper {overflow:hidden;}
.target {top:auto;}

Это будет отображать target как 1em - 1px, но его реальная высота 1em с верхним 1px скрыт.

IE6 нестабилен, когда дело доходит до поддержки абсолютного позиционирования.

Другое решение, вместо приведенного выше кода, заключается в добавлении в таблицу стилей "ie6 only": 

.target {position:static;margin:-1px 0 1px 0;}

Я вижу, у вас есть абсолютно позиционированное решение для работы. Отлично!

1 голос
/ 30 апреля 2010

Требуется ли клиент? Если нет, то просто откажитесь от IE6 и хаки для этого дерьмового / старого браузера.

...