Исправлен макет страницы в IE6 - PullRequest
Новая
       33

Исправлен макет страницы в IE6

3 голосов
/ 27 августа 2008

Верхний и нижний колонтитулы и боковые панели имеют фиксированное положение. В центре область содержимого с обеими полосами прокрутки. Нет внешних полос прокрутки в браузере. У меня есть макет, который работает в 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>

Ответы [ 5 ]

4 голосов
/ 27 августа 2008
1 голос
/ 27 августа 2008

Добавьте следующий код к <head>

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

Добавьте класс ie6fixed CSS к тому, что вы хотите position: fixed;

0 голосов
/ 15 мая 2009

ознакомьтесь со списком хаков с чистым CSS ниже ... некоторые требуют принудительного перевода его в режим причуд (я думаю, это самый надежный вариант), но все работают очень хорошо:

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

Я использовал это с большим эффектом, надеюсь, это поможет!

0 голосов
/ 29 августа 2008

Эти ответы были полезны, и они позволили мне добавить ограниченную форму фиксированного позиционирования в IE6, однако ни один из них не исправляет ошибку, которая нарушает мой макет в 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]-->
0 голосов
/ 27 августа 2008

Попробуйте IE7.js. Должны исправить вашу проблему без внесения каких-либо изменений.

Ссылка: IE7.js

...