如何使 Flexbox 跨浏览器（尤其是 Internet Explorer 11）一致工作？

Internet Explorer 11 中的 Flexbox 兼容性之谜

当您深入研究 CSS Flexbox 领域时，支持情况可能有点难以预测。虽然主流浏览器通常都能配合使用，但 Internet Explorer 11 (IE11) 提出了一些独特的挑战。

IE11 和粘性页脚难题

来自“的“粘性页脚”示例由 Flexbox 解决”在 IE11 中失败。一个神秘的解决方案是在 上撒上 display:flex 。

上的标签和宽度：100%标签。这个魔杖背后的逻辑植根于 IE11 的 flex 属性的非标准默认值。虽然其他浏览器遵守草案规范的 0 1 auto，但 IE11 坚持 0 0 auto。通过显式设置这些值（例如，flex: 1 0 0），您可以引导 IE11 更好地对齐。

驯服 IE11 中的媒体对象

“媒体” Object”示例也对 IE11 提出了挑战。不幸的是，似乎不存在普遍清洁的解决方案。您可能会通过特定于浏览器的 hack 取得一些成功，例如：

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

此 hack 以 Mozilla 为目标并覆盖 flex 属性，恢复所需的行为。但是，请注意，此类黑客攻击可能会在其他浏览器中产生意想不到的后果。

请记住，flexbox 仍在不断发展，浏览器不一致是常见问题。幸运的是，情况正在改善，只要有一点耐心和聪明才智，您就可以应对这些挑战并在网页设计中利用 Flexbox 的力量。

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