4

页眉、页脚和侧边栏有固定的位置。在中心有两个滚动条的内容区域。浏览器上没有外部滚动条。我有一个适用于 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>
4

5 回答 5

5

可能对您的项目来说太过分了，但Dean Edwards 的 IE7 javascript 添加了对 IE6 固定定位的支持。

于 2008-08-27T14:56:46.193 回答
1

将以下代码添加到<head>

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

将ie6fixedCSS 类添加到您想要的任何内容中position: fixed;

于 2008-08-27T19:12:40.977 回答
0

试试 IE7.js。无需进行任何修改即可解决您的问题。

链接：IE7.js

于 2008-08-27T15:17:25.117 回答
0

这些答案很有帮助，它们确实让我向 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-29T15:02:13.110 回答
0

查看下面的纯 css hacks ......有些需要强制它进入 quirks 模式（我认为这是最强大的），但一切都很好：

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

I've used this to great effect, hope it helps!

于 2009-05-15T03:20:22.607 回答