为什么我的 Flexbox 无法在 Internet Explorer 11 中运行，如何修复？

Flexbox 在 IE 中无法运行：原因和解决方法

正如您所遇到的，Flexbox 在 Internet Explorer 11 中可能会出现故障。这是由于flex 属性的解析问题。幸运的是，有几种解决方法可以解决此问题：

1。利用长手属性：

不要使用简写（例如，“flex: 0 0 35%”），而是将其分解为长手属性：

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

2.启用 Flex-shrink：

通过将“flex: 0 0 35%”替换为：

flex: 0 1 35%;

3 来确保启用 Flex-shrink。处理百分比和无单位值：

使用基于 flex-basis 的变体，尤其是当您不确定 IE11 版本时：

flex: 1 1 0;
flex: 1 1 0px;
flex: 1 1 0%;

4.考虑 flex: auto:

使用“flex: auto”（相当于“flex: 1 1 auto”）代替“flex: 1”。这将防止从行弯曲方向切换到列弯曲方向时项目折叠。

5.使用宽度/高度属性：

作为后备，考虑恢复到传统的宽度/高度属性。

6.选择块布局：

在特定情况下，块布局（即“display: block”）可能是弹性布局的可行替代方案。

其他提示：

• 要警惕可能将 0px 转换为 0 的缩小器（不影响 0% 的问题）。

• 请参阅以下资源以获取更多见解：

  • flexbox 中的图像行为：https://stackoverflow.com/ q/23051125
  • IE 中的简写属性与长写属性： https://stackoverflow.com/q/24549977

以上是为什么我的 Flexbox 无法在 Internet Explorer 11 中运行，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！