Проблема с переменной высотой CSS в IE6
-
13-09-2019 - |
Вопрос
У меня проблема с размещением левой боковой панели (различная высота DIV) в IE6.
Основные потребности:1.Я не могу установить значение высоты, потому что высота варьируется и должна вычисляться браузером.2.Боковая панель должна иметь интервалы сверху и снизу.
Проблема с верхней панелью решена заменой позиции на относительную.
Есть идеи ?Заранее спасибо !
Ниже вы можете увидеть упрощенный код и снимок того, как он выглядит в стандартных браузерах.
.container {
left: 550px;
top: 10px;
width: 196px;
position: absolute;
line-height: 0px;
font-size: 1px;
}
.inner {
width: 100%;
height: 114px;
background-color: rgb(227, 227, 227);
}
.leftbar {
left: 0px;
top: 7px;
bottom: 7px;
width: 4px;
position: absolute;
background-color: rgb(111, 111, 111);
}
.topbar {
left: 7px;
top: 0px;
right: 7px;
height: 4px;
position: absolute;
background-color: rgb(111, 111, 111);
}
<div class="container">
<div class="inner"></div>
<div class="leftbar"></div>
<div class="topbar"></div>
</div>
Решение
IE6 чрезвычайно плох, когда дело касается абсолютного позиционирования.Размещение чего-либо одновременно слева и справа или сверху и снизу просто не работает.
По сути, у вас есть четыре варианта:
- Отказ от поддержки IE6.
- Откажитесь от абсолютного позиционирования и используйте какой-нибудь другой метод (например, с плавающей запятой).
- Предоставьте упрощенную версию сайта для IE6 — например, переопределив некоторые стили с помощью условных комментариев.
- Используйте JavaScript, чтобы помочь IE6 в позиционировании (например Absolutefudge.js).
Не связан с StackOverflow