如何使 Flexbox 跨浏览器（包括 Internet Explorer 11）一致地工作？

Flexbox 和 Internet Explorer 11：在 中显示：flex？

追求抛弃“浮动”布局和拥抱 CSS Flexbox，在 Internet Explorer 11 中可能会遇到兼容性问题。虽然主流浏览器通常都支持 Flexbox，但 IE11 呈现

“粘性页脚”难题

“通过 Flexbox 解决”中的“粘性页脚”示例在 IE11 中遇到了障碍。通过将 display:flex 添加到 中element 和 width:100% 到

，但是问题已解决。了解此解决方法背后的基本原理至关重要。

IE10 和 IE11 中的 flex 默认值与草案规范不同，导致在遇到像 flex:1 这样的 CSS 声明时出现不一致的行为。将其修改为 1 0 0 可确保跨浏览器的兼容性。

解决“媒体对象”之谜

“媒体对象”示例在 IE11 中面临额外的障碍。操纵 CSS 的各种尝试都没有取得成功。不幸的是，在 IE11 中实现功能的干净解决方案仍然难以实现。

兼容性注意事项

前面提到的“粘性页脚”示例的解决方法可能会无意中破坏 Firefox 的渲染。为了解决这个问题，请采用专门针对 Mozilla 的 hack，如下所示：

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

浏览器供应商可能会因其在 W3C 中的候选状态而对 Flexbox 进行不同的解释。然而，随着标准的成熟，这种情况应该会稳定下来。任何替代解决方案将不胜感激。

以上是如何使 Flexbox 跨浏览器（包括 Internet Explorer 11）一致地工作？的详细内容。更多信息请关注PHP中文网其他相关文章！