首页 > web前端 > css教程 > 为什么我的 Flex 容器的'最小高度”在 Internet Explorer 10 和 11 中被忽略?

为什么我的 Flex 容器的'最小高度”在 Internet Explorer 10 和 11 中被忽略?

Barbara Streisand
发布: 2024-12-06 03:08:12
原创
423 人浏览过

Why Does My Flex Container's `min-height` Get Ignored in Internet Explorer 10 and 11?

Internet Explorer 中 Flex 容器被忽视的最小高度

尽管标准化 Flexbox 属性得到了广泛支持,但 Internet Explorer 10 和 11 在以下情况下表现出特殊行为:涉及到柔性容器。忽略 min-height 属性就会出现这样的问题。

考虑一个包含两个子 div 的容器 div,每个子 div 的最大高度为 400 像素。利用 CSS flex 属性, justify-content: space- Between ;旨在均匀分配子 div 之间的垂直空间。然而,这种对齐方式在 Chrome 和 Firefox 中可以完美运行,但在 Internet Explorer 中则不行。

解决方案在于将 Flex 容器本身设置为 Flex 项目。只需添加 display: flex;和弯曲方向:列;对于 body 元素,Internet Explorer 10 和 11 中会考虑容器的 min-height 属性。这可确保子 div 之间的空间分配正确。

此解决方法解决了特定于 Internet Explorer 版本 10 和 11 的 Flexbox 错误,确保现代浏览器的行为一致。有关此问题的更多详细信息,请访问 https://github.com/philipwalton/flexbugs#flexbug-3。

以上是为什么我的 Flex 容器的'最小高度”在 Internet Explorer 10 和 11 中被忽略?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板