Question

我的导航栏中包含动态项目。在ul.breadCrumbs中，商品编号可能会有所不同。该规则将是最后一个li最多为ul.breadCrumbs的30％，而最后一个li应占用剩余空间。它在Chrome和Firefox中使用flex工作，但在IE 9中没有。是否有替代方法来实现IE 9的规则？

由于

<ul class="nav">
    <li>Some stuff..</li>
    <li>
        <ul class="breadCrumbs">
            <li>AAAAAAAA</li>
            <li>BBBBBBBB</li>
            <li>CCCCCCCCCC</li>
            <li>DDDDDDDDDD</li>
        </ul>


    </li>
</ul>

ul.nav > li:first-child{
    float:right;
}

ul.breadCrumbs{
    display:flex;  


}
ul.breadCrumbs > li:last-child{
    flex:1;  
}

ul.breadcrumbs > li:nth-last-child(2){
    max-width:30%;
}

Answer 1

Here's各种HTML5和CSS3功能的polyfill列表。

Richard Herrera的Flexie

灵活性 - 适用于IE 8/9的Flexbox（需要特殊的前缀CSS）

Answer 2

Flex布局不支持IE9。如果必须在IE9中使用flex，则可以使用兼容的库“ flex-native”，该库可以在NPM上找到

IE9支持css3 flex的替代方法

2 个答案: