如何在 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中文网其他相关文章！