在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中添加一个固定位置的限定形式，但是如果我为我的边栏指定了顶部和底部css属性，那么这些修复了在IE6中打破了我的布局的错误（我这是我需要的行为）。

由于顶部和底部不能指定，我使用顶部和高度。高度属性变得非常必要。我使用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