IE9 的 Flexbox 替代品

Posted 2023-03-05

【中文标题】IE9 的 Flexbox 替代品

【英文标题】：Flexbox alternative for IE9

【发布时间】：2014-08-13 19:36:29

【问题描述】：

我最初使用 Chrome 开发了一个网站（最容易设计），但现在我开始使用 IE 支持模型。

话虽如此，我从 IE11 开始，并针对 IE 和 Chrome 之间的古怪差异进行了必要的更改。但现在我正在退出 IE 版本。我能够使用 IE10 的 CSS 正确显示 90% 的网页。但是现在我为这两个浏览器拥有的大多数 CSS 元素在很大程度上与 IE9 无关。

如果可能的话，我不想拥有多个特定于浏览器的样式表。

第一个问题是转换CSS的flexbox模型的IE10+实现。

flexbox 容器的当前实现：

div#navContainer
    display: flex; //Current browsers (IE11, Chrome, etc)
    display: -ms-flexbox; //IE10 implementation


div#TeamsSection 
    text-align: center;


div.NavSection 
    margin: 0px 7px;
    padding: 4px 0px 0px 0px;


div#teams 
    margin: 0px;

    select 
        margin: 0px;
    

html：

<div id="navContainer" class="float-left">
    <div id="LogoSection" class="NavSection">
        <div id="Logo">
            <img src="Images/Logo.png" />
        </div>
    </div>
    <div id="TeamsSection" class="NavSection">
        <label>Select a Team:</label><br />
        <div id="teams"></div>
    </div>
    <div id="UserSection" class="NavSection hidden">
        <label>Select a User:</label><br />
        <div id="requestor"></div>
    </div>
</div>

我知道 IE9 没有实现 Flexbox，所以请不要侮辱我已经做过的研究。我需要一个等效的实现，让我尽可能少地更改 HTML。

【问题讨论】：

你没有说你如何使用 flex 属性，display:table 和 table-cell 可能是一个后备，它会在其他地方使用 layout ant text-align。显示：弹性；仅靠它本身并不足以为您提供特定的后备建议

嗯，#navContainer 元素是导致 IE9 出现流量不足问题的元素。我发布了 HTML 和扩展的子 CSS 样式。 #teams & #requestor 由 Mustache 从模板中填充。问题再次出在#navContainer 上，因为 IE10+ 和 Chrome 可以正常工作。它的 IE9，我需要尝试并获得适当的实现。

您应该查看Flexie.js。

这不是 IE9 上 flexbox 的答案，但如果您要添加供应商前缀以支持 IE10，请考虑使用 Autoprefixer。这真的很容易。

使用自动前缀。

【参考方案1】：

一年后，这个使用 javascript 调整旧浏览器布局的解决方案似乎很有趣 => https://github.com/10up/flexibility

Github 上将近 2000 颗星，但最后一次提交是 3 个月前，我不知道它是否还在积极维护。

【讨论】：

质量实用程序不需要大量的主动更改。 Google 的 BootStrap 似乎也提供了我们一直在苦苦挣扎的功能。

其实是 Twitter Bootstrap。只是在说'。 ;)

技术，它们都来自树的同一个分支；）

【参考方案2】：

使用modernizr 检测是否存在弹性功能，并在必要时提供后备样式。 Modernizr 将向 html 元素添加 flexbox、no-flexbox 和 flexbox-legacy 等类，因此您可以在样式中使用：

    .container 
        display: flex;
    
    .no-flexbox .container 
        display: table-cell;
    

我强烈建议阅读 Zoe Gillenwater (@zomigi) 关于该主题的演讲，尤其是 Leveling Up With Flexbox (Smart Web Conference - September 2014)

幻灯片21：水平导航间距>display: inline-block; 幻灯片 62：在没有 flexbox 的情况下固定元素 > display: table-cell; 幻灯片 70,71：对齐表单后备 幻灯片 88,91：带和不带弹性顺序的示例

另外，在她的演示文稿CSS3 Layout 中，有一些很好的并排预览了带有和不带有 flexbox 的布局：

幻灯片 73：使用带有 flexbox 的内联块：水平形式 幻灯片 79：使用带有 flexbox 的内联块：水平导航

我的一些收获：

浏览器支持ie10+还不错caniuse 使用auto-prefixr处理浏览器前缀 使用modernizr 提供后备方案 “flexbox 不是全有或全无”@zomigi

【讨论】：

.container display: flex;显示：表格单元格；

我觉得应该是.container display: table-cell; display: flex;

【参考方案3】：

我喜欢上面的答案，但您不必使用modernizr。 您可以简单地为 ie9 使用表格布局，为其他人使用 flexbox。

.container 
    display: table-cell; // ie9
    display: flex;       // others

【讨论】：

不错！我猜可能有一些边缘情况，flexbox-legacy 浏览器的渲染略有不同.. autoprefixer 仍然很方便！

这不起作用。需要内联定位的是 .container 的子元素，而不是 .container 本身。

如果您需要，请将上述代码添加到子元素中。

我喜欢创建一个 mixin，以便其他开发人员，但很可能是我自己，不要忘记添加后备：@mixin display-flex() display: table-cell; display: flex;