Question

我一直在ASP.NET中编写一个小型公告板网站，我所做的一切都不会让它在IE6中正常工作。主页面有一个标题DIV，其下方有内容区域。在这个区域内还有另外三个区域，左上角是一个搜索工具，下面是一个通知列表，以及当前显示在这两个区域右侧的通知。搜索和通知列表区域的宽度为240px，显示的通知区域占据宽度的其余部分。问题是如果内容大于显示区域（即溢出：自动样式），通知列表和显示的通知区域都应滚动，但这不会发生在IE6中。其他一切都很好。布局如下：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head runat="server">
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>Notice Board</title>
    <style type="text/css">
      body
      {
        margin:0;
        border:0;
        padding:0;
        height:100%;
        max-height: 100%;
        overflow: hidden; 
      }

      #header
      {
        position:absolute; 
        top:0; 
        left:0; 
        width:100%; 
        height:130px; 
        overflow:hidden; 
      }

      #footer
      {
        position:absolute; 
        bottom:0; 
        left:0;
        width:100%; 
        height:0px; 
        overflow:hidden; 
      }

      #content
      {
        position:absolute; 
        top:130px;
        left:0;
        bottom:0px; 
        right:0; 
        overflow:hidden; 
      }

      * html body
      {
        padding:130px 0 0 0; 
      }

      * html #content
      {
        height:100%; 
        width:100%; 
      }

      #leftdiv 
      {
        position:absolute;
        left:0;
        width:240px;
        top:0;
        height:100px;
        overflow:hidden;
      }

      #listdiv 
      {
        position:absolute;
        left:0;
        width:240px;
        top:100px;
        bottom:0px;
        overflow:auto;
      }

      #noticediv
      {
        position:absolute;
        left: 270px;
        right:0;
        top:0;
        bottom:0;
        overflow:auto;
      }
    </style>
  </head>
  <body>
    <form id="form1" runat="server" method="post">
      <div id="header" >
        <!-- Header content goes here -->
      </div>

      <div id="content">

        <div id="leftdiv">
          <!-- Content region for the search facility goes here -->
        </div>

        <div id="listdiv">
          <!-- Content region for the notice list goes here -->
        </div>

        <div id="noticediv" >
          <!-- Content region for the displayed notice goes here -->
        </div>
      </div>
    </form>
  </body>
</html>

有什么想法吗？

Answer 1

要使DIV滚动，必须至少指定高度和/或宽度，具体取决于您希望滚动的尺寸。如果给出顶部和底部值，某些浏览器（例如Firefox）将推断高度。但是，IE6不会。

Answer 2

如果您仍然坚持支持IE6，那么使用Dean Edwards' IE7 scripts可以解决很多CSS问题 - 我没有遇到过这个特殊问题，但是能够从更兼容的浏览器中获取设计让他们“正常工作”使用这些脚本。借助IE条件评论的神奇之处，您可以为那些仍然使用当前两个版本的浏览器的人提供修复服务。

使用CSS在IE6中滚动DIV

2 个答案: