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 надвишава 300px и браузърът не добавя вертикална лента за превъртане към прозореца. В IE11 DIV също получава своята лента за превъртане, но също така и прозореца на браузъра (само ако DIV е видим, т.е. div.style.display == блок). Някакви идеи как да се отърва от поведението на този браузър?

АКТУАЛИЗАЦИЯ: ето цигулка, за да го демонстрирате, моля, обърнете внимание на вертикалната лента за превъртане в рамката с резултати, която се появява, когато списъкът е показано.


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 задейства изпразнения (изобразен OK с преливащо или не съдържание) контейнер да бъде изобразен с много голяма височина. Поправено е с помощта на overflow-y: scroll. Обърнете внимание, че дъщерните елементи са display: block.   -  person Sergiu Paraschiv    schedule 10.07.2014


Отговори (3)


Поправих, като премахнах display:inline срещу div.select-box > div селектор. Ето новата цигулка.

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

Обсъдих това с един от нашите разработчици, работещи върху CSS в IE. Това наистина изглежда е грешка в IE11, която проучваме.

person adrianba    schedule 07.02.2014
comment
Но в случай на <img/> от вашия тест този проблем не се появява. Чудя се защо... (Благодаря, че продължихте тази тема). - person Cromax; 07.02.2014
comment
Имам намалено възпроизвеждане тук. Това е нещо общо със смесването на вградени елементи. Ще актуализирам тук, ако имам какво да споделя от нашето разследване. Може би можете да намерите начин да го заобиколите. - person adrianba; 08.02.2014

Можете да използвате inline-block вместо inline в div.select-box {}, с това ще получите същия визуален резултат без ненужното превъртане

person aagamezl    schedule 15.09.2015