Bootstrap 4 在 IE 11 中忽略导航栏内容垂直对齐

Question

我将导航栏放置在背景图像上（使用 class bg-light），导航栏位于图像底部。但在 IE 11 中，导航栏出现在图像顶部。我知道 IE 11 存在 Bootstrap 对齐问题，这可能是其中之一，但想知道是否有任何解决方法可以让导航栏留在 IE 中的图像底部？这是精简代码：

<style>
.bg-light{
    background-image:url("https://www.restinbeing.com/images/header3.jpg");
    background-repeat: no-repeat;
    min-height: 140px;
    margin:0px auto;
}
</style> 

<nav class="navbar navbar-expand-md navbar-light bg-light d-flex align-items-end "> 
<div class="nav-content">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown menubar"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">About </a> 
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Item 1</a>
                </div>
                </li>
         </ul>
    </div>
</nav>

Answer 1

这是一个 known issue 的 IE。 min-height 属性在 IE 中与 Flexbox 布局一起使用时将不起作用。我们可以使用 css-tricks 在 IE 中修复它。在 Flexbox 布局中给父级一个 flex 列容器。

CSS 弹性盒布局中的父级：

display: flex;
flex-direction: column;

在您的代码中，您需要在 CSS 中以 IE 11 为目标，以使样式仅适用于 IE。您可以使用 -ms-high-contrast 创建媒体查询。因为 -ms-high-contrast 是 Microsoft 特定的（并且仅在 IE 10+ 中可用），所以它只会在 Internet Explorer 10 及更高版本中解析。

因此您只需要在 css 样式中添加以下代码：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
      /* IE10+ CSS styles go here */          
     html, body {
        display: flex;
        flex-direction: column;
     }
}

Answer 2

事实证明 min-height 与 flex 是问题所在，将其替换为 height 就成功了。请参阅：https://github.com/philipwalton/flexbugs#flexbug-3 建议的解决方法也有效，并且在需要 min-height 的地方会有所帮助。

Bootstrap 4 在 IE 11 中忽略导航栏内容垂直对齐

Bootstrap 4 navbar content vertical alignment ignored in IE 11

internet-explorer

navbar

bootstrap-4