如何修复 Internet Explorer 11 中的 Flexbox 问题？

解决 IE 中的 Flexbox 问题

无法在 IE11 中利用 Flexbox？出现此问题的原因是 IE 难以解析 flex 属性。以下是几种解决方法：

利用常用属性

避免使用简写的 flex 属性（例如，flex: 0 0 35%）。相反，使用长手属性：

• flex-grow: 0
• flex-shrink: 0
• flex-basis: 35%

启用Flex-shrink

确保在你的 Flex 声明中启用了 flex-shrink。尝试将代码从 flex: 0 0 35% 修改为 flex: 0 1 35%。

解决基于 Flex 的值变化

IE11 在 flex- 方面表现出不同的行为基础值。尝试这些变化：

• flex: 1 1 0
• flex: 1 1 0px
• flex: 1 1 0%

小心将 0px 转换为 0 的缩小器，这可能会导致调试

使用 Flex: Auto

用 flex: auto 替换 flex: 1，这意味着：

• flex-grow: 1
• 伸缩收缩： 1
• flex-basis: auto

这可以防止在媒体查询中从行到列的 flex-direction 转换时项目崩溃。

使用旧-时尚的宽度/高度属性

考虑恢复为传统宽度

采用块布局

在某些情况下，块布局（display: block）可以充分替代flex布局（display: flex; flex-direction: 列）在特定容器中。

以上是如何修复 Internet Explorer 11 中的 Flexbox 问题？的详细内容。更多信息请关注PHP中文网其他相关文章！