在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