html – Flexbox替代IE9

我已经开发了一个网站与Chrome最初(最容易设计),但现在得到了IE支持模型。

话虽如此,我从IE11开始,并对IE&铬。但现在我下台IE版本。我能够得到90%的网页正确显示与IE10的CSS。但现在大多数CSS元素,我有这两个浏览器,是大部分与IE9无关。

我想保持从需要有多个浏览器特定的样式表,如果可能的话。

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

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,所以请不要侮ult我已经做的研究。我需要一个等效的实现,将允许我尽可能少的改变HTML。

使用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)

> slide 21:horizo​​ntal navigation spacing> display:inline-block;
>滑块62:没有flexbox的钉扎元件> display:table-cell;
> slide 70,71:alignment forms fallbacks
> slide 88,91:带和不带柔顺的示例

此外,在她的演示文稿CSS3 Layout中,有一些好的sideby side预览的布局有和没有flexbox:

> slide 73:使用带有flexbox的inline-block:水平形式
> slide 79:使用带有flexbox的inline-block:水平导航

我的一些外卖:

>浏览器支持ie10是不错的caniuse
>使用auto-prefixr来处理浏览器前缀
>使用modernizr提供回退
>“flexbox不是全部或没有”@zomigi

http://stackoverflow.com/questions/24371408/flexbox-alternative-for-ie9

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – Flexbox替代IE9