如何在 Internet Explorer 11 中成功實現 Flexbox 的「黏性頁尾」？

Internet Explorer 11 中的Flexbox：探索潛在的障礙

瀏覽CSS Flexbox 領域可能是一項艱鉅的任務，尤其是在考慮到不同的情況時瀏覽器相容性等級。雖然大多數現代瀏覽器無縫支援 Flexbox，但 Internet Explorer 11 提出了顯著的挑戰。當嘗試實現「由 Flexbox 解決」中的「黏性頁腳」範例而不引發意外行為時，會出現一個問題。

要深入研究解決方案，了解 display:flex 對

的影響至關重要。 html>

上的寬度：100%元素。根據 CanIUse 的說法，由於與草案規範的歷史差異，IE10 和 IE11 對 flex:1 的解釋與其他瀏覽器不同。預設情況下，它們為 Flex 項目分配 0 0 auto 而不是 0 1 auto。

要解決此問題，請將 CSS 中的 flex 參數調整為 1 0 0。此修改應該可以緩解該問題，至少部分緩解。但是，此變更可能會無意中破壞 Firefox 的功能。為了緩解這種情況，請採用專門針對 Mozilla 的定向駭客技術，將 flex 恢復到其預期值。

@-moz-document url-prefix() {
 #flexible-content{
      flex: 1;
    }
}

例如：

請記住，flexbox 仍然是 W3C 候選推薦，這會導致差異在瀏覽器解釋中。隨著規範最終確定，預計這些不一致現象將會減少。

以上是如何在 Internet Explorer 11 中成功實現 Flexbox 的「黏性頁尾」？的詳細內容。更多資訊請關注PHP中文網其他相關文章！