IE中的溢出自动中断浮动，直到窗口调整大小

Question

上下文 作为网络应用程序的一部分，我有一组浮动的导航。接下来是多个导航 彼此之间，位于侧边栏和内容之间的容器内。浮子用于实现这一目标。导航容器内的导航使用overflow:auto和height:calc(100vh)，以便它们始终为全高，并且如果内容试图在“折叠”下方转移，则可滚动。

适用于： Firefox，Chrome

闯入： IE11，IE10，IE9（不支持IE＆lt; = 8）

问题： 如果页面在第一个导航栏上没有滚动条的情况下加载，那么一切都很好，但是如果需要滚动条，则浮动符会中断，第二个导航会落在下面，但只有在调整窗口大小之后。然而，奇怪的是，浏览器会阻止元素填充堆叠导航所应用的空间。

我的设置已在this jsFiddle中简化。尝试调整输出的视口大小并刷新以查看上面提到的不同行为。

我应该注意导航是动态宽度的，因为内容是动态的，宽度可能不同。我还想避免使用JavaScript来控制视觉效果，因此纯粹的CSS / HTMl标记解决方案就是我真正想要的。

Answer 1

看起来像IE中的另一个错误。您可以通过设置.nav元素的宽度来解决此问题，或者如果您想要保留auto，则必须使用javascript：

<!--[if IE]>
<script type="text/javascript">
window.onload = function() {
    var navs = document.getElementsByClassName('nav');
    [].forEach.call(navs, function(el) {
        el.style.width = "125px"; // or whatever...
        setTimeout(0, function(){el.style.width = "auto";});
    });
}
</script>
<![endif]-->

demo

另一种解决方案是更改#nav-container元素的CSS。您可以尝试保留其默认行为。它将按预期工作，只要其中的所有内容都向左浮动：

demo

Answer 2

查看下面的css行，而不是你在ur css中提到的高度

 height: -moz-calc(100vh - 40px);
        height: -webkit-calc(100vh - 40px);
        height: calc(100vh - 40px);

reference link