Почему часть «абсолютного» позиционированного элемента DIV в ячейке таблицы не отображается (только в Google Chrome) - PullRequest
2 голосов
/ 11 октября 2011

Чтобы продемонстрировать эту проблему, ниже HTML-файл отображает очень высокий DIV (названный div1), который изначально скрыт, и кнопку, чтобы показать или скрыть div1.Откройте его в Google Chrome, затем нажмите на кнопку, чтобы показать div.Вы заметите, что div теперь отображается, но нет никакой возможности увидеть его нижнюю часть, потому что он слишком высок, чтобы уместиться в окне, и Chrome не отображает полосу прокрутки.

Если вы откроете его в Firefox, такой проблемы не будет.Firefox отображает полосу прокрутки, когда отображается div1, так что вы можете прокрутить, чтобы увидеть его нижнюю часть.

<html>
<head>
  <script src="http://api.prototypejs.org/javascripts/pdoc/prototype.js" type="text/javascript"></script>
</head>
<body>
  <input type="button" onclick="$('div1').toggle();" value='Toggle'></input>
  <table>
    <tr>
      <td>
        <div style="position:relative">   
          <div style="position:absolute">   
            <div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>
          </div>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>

Я обнаружил, что это как-то связано с элементом таблицы и первым div.Если я удаляю теги table / tr / td или меняю стиль первого div с «position :lative» на «position: absolute», Google Chrome будет правильно отображать полосу прокрутки.К сожалению, в моем проекте я не смог этого сделать, так как это затронуло бы множество элементов на странице.

Это похоже на ошибку в Chrome?Есть ли другие обходные пути / исправления?

1 Ответ

1 голос
/ 11 октября 2011

Это также происходит в Safari.

Изменение положения обёртки div # div1 с абсолютного на относительное исправит это:

      <div style="position:relative">   
        <div id='div1' style="position:absolute; height:1500px; width: 200px; border: 1px solid gray; display:none"></div>
      </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...