我正在將我的導航條放在背景圖片上（使用類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="#">專案1</a>
</div>
</li>
</ul>
</div>
</nav>
uj5u.com熱心網友回復：
這是一個IE的已知問題。min-height屬性在IE中與Flexbox布局一起使用時將不起作用。我們可以使用css技巧在IE中修復它。在Flexbox布局中給父節點一個flex column容器。
在Flexbox布局中的父級CSS：
display: flex;
flex-direction: column;
在你的代碼中，你需要在CSS中以IE 11為目標，使樣式只對IE有效。你可以使用-ms-high-contrast創建一個媒體查詢。因為-ms-high-contrast是微軟特有的（并且只在IE 10以上可用），它將只在Internet Explorer 10及以上版本中被決議。
所以你只需要在你的css樣式中添加以下代碼：
@media all and （-ms-high-contrast: none）, （-ms-high-contrast: active） {
/* IE10 的CSS樣式放在這里 */
html, body {
display: flex;
flex-direction: column;
}
}
uj5u.com熱心網友回復：
結果發現Flex的min-height是個問題，用height替換它就解決了。請看。https://github.com/philipwalton/flexbugs#flexbug-3 建議的變通方法也很有效，在需要min-height的地方會有幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/320206.html
標籤：