DIV с max-height и overflow-y заставляет IE11 включать вертикальную полосу прокрутки окна, почему?

Поскольку было бы сложно включить сюда весь код, есть краткое описание проблемы (и несколько созданных фрагментов позже): есть этот элемент DIV с отображением, установленным на none, который всплывает, установив отображение на блокировку (при некотором событии onclick --- как меню). Поскольку содержимое этого DIV больше, чем вся страница, когда блок DIV.style.display ==, браузер добавляет в свое окно вертикальную полосу прокрутки --- и это нормально. Ну, я решил установить max-height и overflow-y для этого DIV, но у DIV есть хорошая вертикальная полоса прокрутки сама по себе (она работает, как и ожидалось), браузер --- в частности IE11 --- все еще добавляет вертикальную прокрутку- бар к окну, как и в предыдущем случае. Вы можете использовать его для прокрутки всей страницы, но без видимой точки (в нижней части окна просто нет содержимого для прокрутки).

Вот как это выглядит (более или менее) в коде. Сначала CSS:

div.mydiv {
    display: none;
    position: absolute;
    border-width: 1px 0px 0px 0px;
    border-color: #BBBBBB black black black;
    border-style: solid solid solid solid;
    border-radius: 0px 0px 5px 5px;
    background-color: white;
    padding: 4px;
    line-height: 11px;
    font-size: 10px;
    font-weight: normal;
    color: #FFFFFF;
    opacity: 1;
    left: -6px;
    top: 12px;
    cursor: default;
    box-shadow: 1px 1px 3px #888888, -1px 1px 2px #EEEEEE;
    z-index: 1600;
}

Теперь HTML:

<div class="mydiv" style="overflow-y: scroll; max-height: 300px;">...</div>

В FireFox это работает так, как ожидалось, то есть DIV получает свою вертикальную полосу прокрутки, если максимальная высота этого DIV превышает 300 пикселей, а браузер не добавляет в окно вертикальную полосу прокрутки. В IE11 DIV также получает свою полосу прокрутки, но также и окно браузера (только если DIV виден, т.е. div.style.display == block). Любые идеи, как избавиться от поведения этого браузера?

ОБНОВЛЕНИЕ: вот fiddle, чтобы продемонстрировать это, обратите внимание на вертикальную полосу прокрутки во фрейме результатов, которая появляется, когда список показано.


html css internet-explorer-11 overflow
person Cromax    schedule 05.02.2014    source источник
comment
У меня не получилось воспроизвести проблему. Вот мой тест.   -  person adrianba    schedule 05.02.2014
comment
Действительно, кажется, что это работает --- тогда это должно быть что-то более глубокое. Я постараюсь подготовить минимальный кейс, показывающий проблему. Спасибо за ваши усилия!   -  person Cromax    schedule 05.02.2014
comment
Я только что добавил ссылку на скрипку, демонстрирующую описанное поведение (ссылка на видео внизу исходного вопроса).   -  person Cromax    schedule 05.02.2014
comment
Я наткнулся на вариант этой проблемы, когда комбинация max-height: 100px и overflow-y: auto вызвала рендеринг контейнера пустого (отображаемого в порядке с переполненным или нет содержимым) с очень большой высотой. Исправил с помощью overflow-y: scroll. Обратите внимание, что дочерними элементами являются display: block.   -  person Sergiu Paraschiv    schedule 10.07.2014

Ответы (3)


arrow_upward
1
arrow_downward

Я исправил, удалив display:inline против селектора div.select-box > div. Вот новая скрипка.

div.select-box > div {
    position: relative;
}
person graham mendick    schedule 20.03.2014

arrow_upward
1
arrow_downward

Я обсуждал это с одним из наших разработчиков, работающих над CSS в IE. Похоже, это ошибка в IE11, которую мы изучаем.

person adrianba    schedule 07.02.2014
comment
Но в случае <img/> из вашего теста этой проблемы не возникает. Интересно, почему... (Спасибо за продолжение этой темы). - person Cromax; 07.02.2014
comment
У меня есть уменьшенная копия здесь. Это как-то связано с смешиванием встроенных элементов. Я обновлю здесь, если мне будет чем поделиться из нашего расследования. Возможно, вы сможете найти способ обойти это. - person adrianba; 08.02.2014

arrow_upward
0
arrow_downward

Вы можете использовать встроенный блок вместо встроенного в div.select-box {}, при этом вы получите тот же визуальный результат без ненужной прокрутки

person aagamezl    schedule 15.09.2015