Прокрутка DIVs в IE6 с помощью CSS - PullRequest
0 голосов
/ 09 июля 2009

Я писал небольшой сайт с досками объявлений в ASP.NET, и ничто из того, что я делаю, не будет работать должным образом в IE6. Главная страница имеет заголовок DIV, с областью содержимого под ним. В пределах этого региона находятся еще три региона, средство поиска в левом верхнем углу, список уведомлений под ним и отображаемое в настоящее время уведомление справа от этих двух. Область поиска и списка уведомлений имеет ширину 240 пикселей, а отображаемая область уведомлений занимает остальную часть ширины. Проблема заключается в том, что список уведомлений и отображаемые области уведомлений должны прокручиваться, если содержимое превышает отображаемую область (т.е. переполнение: автоматический стиль), но в 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>

Есть идеи?

Ответы [ 2 ]

2 голосов
/ 09 июля 2009

Для прокрутки DIV он должен иметь как минимум указанную высоту и / или ширину, в зависимости от того, какое измерение вы хотите прокрутить. Некоторые браузеры (например, Firefox) будут выводить высоту, если заданы как верхнее, так и нижнее значение. IE6 не будет, однако.

1 голос
/ 09 июля 2009

Если вы все еще застряли с поддержкой IE6, то многие проблемы с CSS решаются с помощью сценариев IE7 Дина Эдвардса - я не сталкивался с этой конкретной проблемой, но смог принять проектирует из более совместимых браузеров и заставляет их «просто работать» с помощью этих сценариев. С помощью магии условных комментариев IE вы можете просто предоставлять исправления тем людям, которые все еще привязаны к браузерам, которые на две версии отстают от текущих.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...