具有max-height和overflow-y的DIV會導致IE11啓用窗口的垂直滾動條---爲什麼？

因爲這裏很難包含整個代碼，所以對問題進行了簡要描述（以及後面的一些精心製作的代碼片段）：這個DIV元素的顯示設置爲none，通過將顯示設置爲阻止（在某些onclick事件 - - 就像一個菜單）。由於這個DIV的內容比整個頁面都要大，所以當DIV.style.display ==塊時，瀏覽器將垂直滾動條添加到它的窗口---這很好。那麼，我決定在這個DIV上設置max-height和overflow-y，但是你DIV有自己的垂直滾動條（它按預期工作），瀏覽器---特別是IE11 ---仍然增加了垂直滾動條 - 如前一種情況一樣，酒吧到窗戶。你可以用它來滾動整個頁面，但沒有明顯的點（窗口底部沒有內容可以滾動到）。具有max-height和overflow-y的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 ==塊）。任何想法如何擺脫這種瀏覽器的行爲？

更新：這裏是fiddle來演示它—請注意顯示列表時出現的Result框中的垂直滾動條。

來源

2014-02-05 Cromax

我一直無法重現該問題。這是我的[測試]（http://tests.adrianba.net/yscrolldiv.htm）。 – adrianba

事實上，它似乎有效 - 它肯定是更深的東西。我會盡量準備顯示問題的最小案例。謝謝你的努力！ – Cromax

我剛剛添加鏈接到小提琴展示描述的行爲（視頻鏈接在原始問題的底部）。 – Cromax

我通過刪除顯示器來修復：內嵌於div.select-box> div選擇器。這是new fiddle。

div.select-box > div { 
    position: relative; 
}

來源

2014-03-20 19:49:56

我已經與我們的一位開發人員在IE中使用CSS討論過這個問題。這似乎是我們正在研究的IE11中的一個錯誤。

來源

2014-02-07 16:31:46 adrianba

但是如果從您的測試中發現''，則不會出現此問題。我想知道爲什麼...（感謝您繼續此線程）。 – Cromax

我有一個減少repro [這裏]（http://tests.adrianba.net/yscrolldiv2.htm）。這與混合內聯元素有關。如果我有我們的調查分享的東西，我會在這裏更新。也許你可以找到解決方法。 – adrianba

你可以使用inline-block的在div.select箱{}，而不是內聯，這樣，你會得到相同的視覺效果，而不unnecesary滾動

來源

2015-09-15 20:37:51 CodeMaxter

具有max-height和overflow-y的DIV會導致IE11啓用窗口的垂直滾動條---爲什麼？

回答

相關問題