IE9+ 中的负边距底部允许滚动太远

Question

让我们考虑一下这个小提琴（把它放在 JSBin 上以便它在 IE8 中工作）：

http://jsbin.com/EpuboseG/1/edit

HTML：

<div id="outer">
    <div id="inner">
         <div id="notVisible">
            I am not visible in all browsers (this is what I want)
         </div>
         1<br>2<br>3<br>4<br>5<br>
         6<br>7<br>8<br>9<br>10<br>
         11<br>12<br>13<br>14<br>15<br>
         16<br>17<br>18<br>19<br>20<br>
    </div>
</div>

CSS：

#outer {
    overflow-y: scroll;
    height: 150px; /*smaller than contents */

    background-color: yellow;
    width: 400px;
}

#inner {
    position: relative;
    top: -30px;
    margin-bottom: -30px;

    background-color:red;
}

#notVisible {
    height: 30px; /* due to "top" in #inner I am invisible */
    background-color: lime;
}

我在#inner 中有一个负数margin-bottom，它被相同的负数top 补偿，两者均为30px。在所有浏览器中的结果是#inner 的前 30px 是不可见的，这很好。

为什么我有margin-bottom:-30px; top:-30px？为了隐藏内部 div 的顶部 30px，并将其他所有内容向上移动（好像内部 div 的顶部 30px 从未存在过）。

但是问题是，当我使用滚动条时，在 IE9+（IE9、IE10、IE11）中我可以滚动太远 - 在底部我可以看到一个 30 像素的空黄色东西。在 IE8、Firefox、Chrome、Safari、Opera 中并非如此。

基本上任何负边距底部都会引起我的这种行为。 有什么解决办法吗？

编辑：

似乎当我删除margin-bottom: -30px; 但保留top: -30px 时，角色正在切换，即我在除IE9+ 之外的所有地方都看到黄色背景。

Answer 1

您可以有 IE9、10 和 11 的条件语句：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"> // For IE10+
    <style>
        //rest of the styles
    </style>
    <!--[if IE]>
        <style> //IE9+ specific styles here
        </style>
    <![endif]-->
    <!--[if lte IE 8]>
        <style> //IE8 and under specific styles here. 
        </style>
    <![endif]-->

它会添加几行代码，但它可以工作。元强制 IE10+ 采用 IE9 行为，因为 IE10+ 不再支持 if 语句。第一个if 语句一般针对IE，第二个专门针对IE8 及以下。如果浏览器是 IE9+，它将忽略第二条语句并使用第一条语句中的样式。如果浏览器是 IE8-，它将使用第二个语句中的样式。所有其他浏览器都会忽略 if 语句并使用原始 CSS。