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

Question

让我们考虑一下这个 fiddle (把它放在 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;顶部:-30px？为了隐藏内部 div 的顶部 30px，并将其他所有内容向上移动(就好像内部 div 的顶部 30px 从未存在过)。

但是问题是，当我使用滚动条时，在 IE9+(IE9、IE10、IE11)中我可以滚动得太远 - 在底部我可以看到一个 30px 的空黄色东西。在 IE8、Firefox、Chrome、Safari、Opera 中不是这种情况。

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

编辑:

似乎当我删除 margin-bottom: -30px; 但保留 top: -30px 时， Angular 色正在切换，即我看到到处都是黄色背景，除了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。