Исправлена макет страницы в IE6

Верхний колонтитул и боковые панели имеют фиксированное положение. В центре область содержимого с двумя полосами прокрутки. В браузере нет внешних полос прокрутки. У меня есть макет, который работает в IE7 и FF. Мне нужно добавить поддержку IE6. Как я могу сделать эту работу?Исправлена макет страницы в 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>

источник

2008-08-27 Mocky

Может быть излишним для вашего проекта, но Dean Edwards' IE7 javascript adds support for fixed positioning to IE6.

источник

2008-08-27 14:56:46 ceejayoz

Попробуйте IE7.js. Должен исправить вашу проблему, не внося никаких изменений.

Ссылка: IE7.js

источник

2008-08-27 15:17:25 Cade

Добавьте следующий код в <head>

<!--[if lte IE 6]> 
<style type="text/css"> 
html, body { 
    height: 100%; 
    overflow: auto; 
} 
.ie6fixed { 
    position: absolute; 
} 
</style> 
<![endif]-->

Добавьте класс ie6fixed CSS, чтобы все, что вы хотите быть position: fixed;

источник

2008-08-27 19:12:40 palotasb

Эти ответы были полезны, и они позволяют мне добавьте ограниченную форму фиксированного позиционирования в 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]-->

источник

2008-08-29 15:02:13 Mocky

проверка из чистого CSS хаков ниже ... некоторые требуют заставляя его в режиме совместимости (я думаю, что это самый надежный), но все работают очень хорошо:

http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/ http://tagsoup.com/cookbook/css/fixed/

I Я использовал это для большого эффекта, надеюсь, что это поможет!

источник

2009-05-15 03:20:22

Исправлена ​​макет страницы в IE6

ответ

Смежные вопросы