修复IE6中的页面布局
时间：2020-03-05 18:43:54 来源:igfitidea点击:
页眉，页脚和侧边栏具有固定位置。中间是带有两个滚动条的内容区域。浏览器上没有外部滚动条。我有一个可以在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>
解决方案
回答
对于项目而言，可能有些矫kill过正，但是Dean Edwards的IE7 javascript为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]-->
将ie6fixedCSS类添加到任何我们想成为的位置：fixed;`
回答
这些答案很有帮助，它们的确使我向IE6添加了有限形式的固定位置，但是，如果我为侧边栏同时指定了top和bottom css属性，则这些方法都无法修复破坏IE6布局的错误。我需要的行为)。
由于无法指定顶部和底部，因此我使用了顶部和高度。事实证明height属性非常必要。我使用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 hack ...有些要求将其强制为怪癖模式(我认为这是最可靠的)，但所有方法都运行良好：
http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/
http://tagsoup.com/cookbook/css/fixed/
我已使用此方法产生了很大的效果，希望对我们有所帮助！
