html - 在 IE 中溢出自动中断 float ，直到窗口调整大小

Question

上下文:我有一组 float 导航作为网络应用程序的一部分。多个导航坐在旁边在一个位于侧边栏和内容之间的容器内相互关联。 float 用于实现这一点。导航容器内的导航使用 overflow:auto 和 height:calc(100vh) 以便它们始终为全高，并且如果内容试图在折叠下方转义则可滚动'.

适用于: Firefox、Chrome

闯入: IE11、IE10、IE9(不支持 IE <= 8)

问题:如果页面在第一个导航栏上没有滚动条加载，那么一切都很好，但如果需要滚动条，则 float 中断并且第二个导航栏位于下方，但仅在调整窗口大小之前。然而，奇怪的是，浏览器确实阻止了元素填充堆叠导航应该所在的空间。

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

我应该注意到，导航是动态宽度的，因为内容是动态的，宽度可能会有所不同。我还想避免使用 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