ModalPopupExtender не работает с макетом фрейма IE6 - PullRequest
Новая
       14

ModalPopupExtender не работает с макетом фрейма IE6

0 голосов
/ 15 июня 2010

Я использую макет "рамка", похожий на тот, который указан в . Этот превосходный ответ : div #top вверху страницы, div # слева и div # основной с основным содержанием. Div #top и #left содержат навигационные меню.

Теперь я хочу использовать всплывающий элемент div с помощью AjaxControlToolkit ModalPopupExtender внутри содержимого (#main) div.

Это прекрасно работает в IE8 (где #top, #left, #main все имеют position: fixed), но когда я запускаю его в IE6, модальный фон покрывает только #main div - мне нужно, чтобы он покрывал весь страницы, включая элементы навигации #top и #left.

Глядя на скрипт для ModalPopupExtender, он, похоже, ищет родительскую иерархию, пока не найдет родителя с относительной или абсолютной позицией. И в рендеринге IE6 у #main div есть позиция: абсолютная, потому что позиция: фиксированная не поддерживается, что, я думаю, объясняет, что происходит.

Какие-нибудь предложения для лучшего / самого простого способа заставить это работать должным образом на IE6? В идеале, без изменения кода ModalPopupExtender, но я сделаю это, если потребуется, и это лучшее решение.

1 Ответ

0 голосов
/ 22 июня 2010

Я реализовал вариант решения в этом ответе , который, кажется, решает проблему:

  • Для IE6 условно установите положение #main div: static со значением margin-left равным ширина # левого дел. К сожалению, в IE6 не работает margin-top, поэтому ...

  • Для IE6 условно добавить пустой div с id ie6-spacer перед основным div.

  • Установите высоту разделительного элемента ie6 на ту же высоту, что и у #top div.

Это кажется уловкой. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>'Frames' using &lt;div&gt;s</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    #top, #left, #main {
      position: fixed;
      overflow: hidden;
    }

    #top {
      top: 0;
      width: 100%;
      background-color: #ddd;
      height: 100px;
    }

    #left {
      left: 0;
      top: 100px;  /* move everything below #top */
      bottom: 0;
      background-color: #bbb;
      width: 120px;
    }

    #main {
      top: 100px;
      left: 120px;
      bottom: 0;
      right: 0;
      overflow: auto;
    }
  </style>
  <!--[if IE 6]>
  <style>
    #top, #left {
      position: absolute;
    }

    #ie6-spacer {
        height:100px;
    }

    #left {
      height: expression((m=document.documentElement.clientHeight-100)+'px');
    }

    #main {
      margin-left:120px;
      height: expression((m=document.documentElement.clientHeight-100)+'px');
      width: expression((m=document.documentElement.clientWidth-120)+'px');
    }
  </style>
  <![endif]-->
</head>
<body>
  <div id="top">Title<br /></div>
  <div id="left">LeftNav<br /></div>
  <!--[if IE 6]>
  <div id="ie6-spacer"></div>
  <![endif]--> 
  <div id="main">
    <p>
        Lorem ipsum ...<br />
        <!-- just copy above line many times -->
    </p>
  </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...