Фиксированный макет страницы в IE6
Верхний колонтитул, нижний колонтитул и боковые панели имеют фиксированное положение. В центре область содержимого с обеими полосами прокрутки. В браузере нет внешних полос прокрутки. У меня есть макет, который работает в IE7 и FF. Мне нужно добавить поддержку IE6. Как я могу заставить это работать?
Вот пример моего текущего CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout</title>
<style>
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.sample-border {
border: 1px solid black;
}
#header {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
height: 60px;
}
#left-sidebar {
position: absolute;
top: 65px;
left: 0px;
width: 220px;
bottom: 110px;
}
#right-sidebar {
position: absolute;
top: 65px;
right: 0px;
width: 200px;
bottom: 110px;
}
#footer {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 105px;
}
@media screen {
#content {
position: absolute;
top: 65px;
left: 225px;
bottom: 110px;
right: 205px;
overflow: auto;
}
body #left-sidebar,
body #right-sidebar,
body #header,
body #footer,
body #content {
position: fixed;
}
}
</style>
</head>
<body>
<div id = "header" class = "sample-border"></div>
<div id = "left-sidebar" class = "sample-border"></div>
<div id = "right-sidebar" class = "sample-border"></div>
<div id = "content" class = "sample-border"><img src = "/broken.gif" style = "display: block; width: 3000px; height: 3000px;" /></div>
<div id = "footer" class = "sample-border"></div>
</body>
</html>
Ответы 5
Возможно, для вашего проекта это будет излишним, но JavaScript Дина Эдвардса для IE7 добавляет поддержку фиксированного позиционирования в IE6.
Попробуйте IE7.js. Должен решить вашу проблему без внесения каких-либо изменений.
Ссылка: IE7.js
Добавьте следующий код в <head>
<!--[if lte IE 6]>
<style type = "text/css">
html, body {
height: 100%;
overflow: auto;
}
.ie6fixed {
position: absolute;
}
</style>
<![endif]-->
Добавьте класс ie6fixed CSS к тому, чем вы хотите быть position: fixed;
Эти ответы были полезны, и они позволили мне добавить ограниченную форму фиксированного позиционирования в IE6, однако ни один из них не исправляет ошибку, которая нарушает мой макет в IE6, если я укажу как верхнее, так и нижнее свойство css для моих боковых панелей (что является поведение мне нужно).
Так как верх и низ не могут быть указаны, я использовал верх и высоту. Свойство высоты оказалось очень нужным. Я использовал javascript для пересчета высоты при загрузке страницы и при любом изменении размера.
Ниже приведен код, который я добавил в свой тестовый пример, чтобы заставить его работать. Это могло бы быть намного чище с jQuery.
<!--[if lt IE 7]>
<style>
body>div.ie6-autoheight {
height: 455px;
}
body>div.ie6-autowidth {
right: ;
width: 530px;
}
</style>
<script src = "http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type = "text/javascript"></script>
<script type = "text/javascript">
function fixLayout() {
if (document.documentElement.offsetWidth) {
var w = document.documentElement.offsetWidth - 450;
var h = document.documentElement.offsetHeight - 175;
var l = document.getElementById('left-sidebar');
var r = document.getElementById('right-sidebar');
var c = document.getElementById('content');
c.style.width = w;
c.style.height = h;
l.style.height = h;
r.style.height = h;
}
}
window.onresize = fixLayout;
fixLayout();
</script>
<![endif]-->
посмотрите чистые css-хаки ниже ... некоторые требуют принудительного переключения в режим причуд (я думаю, что это самый надежный), но все работают очень хорошо:
http://ryanfait.com/resources/fixed-osition-in-internet-explorer/http://tagsoup.com/cookbook/css/fixed/
Я использовал это с большим эффектом, надеюсь, это поможет!