Question

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

话虽这么说，我开始使用IE11，并对IE和IE之间的古怪差异进行了必要的修改。铬。但现在我正在踩下IE版本。我能够使用CSS为IE10正确显示90％的网页。但是现在我为这两个浏览器提供的大多数CSS元素在很大程度上与IE9无关。

如果可能的话，我希望不再需要多个浏览器特定的样式表。

首先出现的问题是转换IE的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。

Answer 1

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

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

我强烈建议您阅读Zoe Gillenwater（@zomigi）关于此主题的演讲，特别是Leveling Up With Flexbox (Smart Web Conference - September 2014)

幻灯片21：水平导航间隔＆gt; display: inline-block;
幻灯片62：没有弹性框的钉扎元件＆gt; display: table-cell;
幻灯片70,71：对齐表单回退
幻灯片88,91：有和没有弹性顺序的示例

此外，在她的演示文稿CSS3 Layout中，有一些关于有和没有flexbox的布局的好的辅助预览：

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

我的一些要点：

浏览器支持ie10 +非常好caniuse
使用auto-prefixr来处理浏览器前缀
使用modernizr提供回退
“flexbox不是全部或全无”@zomigi

Answer 2

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

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

Answer 3

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

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

适用于IE9的Flexbox替代品

3 个答案: