为啥像 IE9 这样的旧浏览器没有弹性盒 polyfill？

Posted 2023-03-06

【中文标题】为啥像 IE9 这样的旧浏览器没有弹性盒 polyfill？

【英文标题】：Why isn't there a flexbox polyfill for older browsers like IE9?为什么像 IE9 这样的旧浏览器没有弹性盒 polyfill？

【发布时间】：2016-03-02 16:04:44

【问题描述】：

是否有一些问题阻止人们创建它？是不是太复杂了？

也许没有必要？

它是不是已经创建了，我只是找不到它？

我认为它是一个基于 js 的库并以这种方式工作：

检查浏览器是否原生支持flexbox；

如果没有，则解析 CSS 并检查元素是否具有 flexbox 相关规则；

如果是这样，它会尝试通过 javascript 通过计算子元素的所有位置和大小来模拟这些规则，并使用 position: absolute; 定位它们。

基本上，与 Masonry 和类似库所做的相同，但使用 flexbox 规则。有可能吗？

编辑：this question 没有解释为什么它不能完成。

【问题讨论】：

Is there any polyfill for current CSS Flexible Box Layout Module as per W3C CR (display: flex etc.)?的可能重复

【参考方案1】：

“通过 javascript 模拟这些规则”是“最不可能”的部分。

弹性盒子纯粹是位置：静态的东西，你不能移动它 position:absolute layer（这后面的东西太多了）； 弹性盒计算是在 JS 不可用的所谓渲染树上进行的；

为了将 JS 用于静态布局，浏览器应该有一种机制来连接用户代码以呈现树形结构和布局：

div  layout: myFlexManager url(my-layouts.js); 

但一旦浏览器拥有这样的功能，flexbox 就会被抛弃，因为这是有史以来最糟糕、最丑陋的 CSS 规范 - 社区会想出更好的东西 - 更简单、更实用。

【讨论】：

如果我尝试从 JS 实时实现弹性盒计算，你能解释一下究竟会出现什么问题吗？旧版本的弹性盒规格有 polyfill，如果几年前可以做到，为什么现在不能做到？

可以进行一些非常粗略的模拟，是的。但正如你所知，这些尝试并不那么受欢迎。出于很多原因。原因之一是人们已经在使用这些功能的纯 CSS 模拟：网格系统、显示：表格单元等。注意：这些是纯 CSS 模拟，不需要运行任何 JS。

@c-smile 你能举个例子/jsfiddle，其中绝对位置不适用于flexbox吗？我相信position: absolute 有自己的特点，不服从 flexbox... 也不一定需要

***.com/questions/41033245/…

@Machado 因为它破坏了 CSS 2.1 中建立的盒子模型当你说 width:100px 这并不意味着当你在其上使用 flexbox 时元素将是 100px 宽。灵活性应该由 flex units 定义，而不是属性，所以如果您希望边距灵活，请width:*; 和margin-left:2*; width:1*。

【参考方案2】：

实际上有一个库完全符合我的要求：https://github.com/jonathantneal/flexibility

它处于开发的早期阶段，但希望它很快就会可行。

【讨论】：

你确定吗？你可以在他们的 GitHub 页面上找到：“要开始在 Internet Explorer 8 和 9 或任何旧版浏览器中使用 Flexbox，请下载 Flexibility.js 脚本并将其包含在页面的任何位置。”

最新版本 (2.x) 不适用于 ie9。我认为 1.x 版本确实有效