如何在 ie11 上修改 flex-flow 的问题？答案

【问题标题】：How can I modify problem for flex-flow on ie11?如何在 ie11 上修改 flex-flow 的问题？
【发布时间】：2019-07-06 18:55:12
【问题描述】：

我想将元素li横向排列，超过长度时，将下一个元素放在最上面一行。

父 Div-box 有 "position:fixed;"选项。

Chrome，Edge 没问题。但 IE11 不是。

如果您对此问题有提示。请告诉我。

                    ul {
                    list-style-type: none;
                    padding: 0;
                    margin: 0;
                    display: flex;
                    flex-flow: row wrap-reverse;

                    li {
                        display: inline-block;
                        width: 200px;
                        height: 30px;
                        font-size: 20px;

                        span {
                            font-size: 28px;
                        }
                    }

            <ul>
                <li id="conErr1"><span>1</span>번 수신기 통신장애</li>
                <li id="conErr2"><span>2</span>번 수신기 통신장애</li>
                <li id="conErr3"><span>3</span>번 수신기 통신장애</li>
                <li id="conErr4"><span>4</span>번 수신기 통신장애</li>
                <li id="conErr5"><span>5</span>번 수신기 통신장애</li>
                <li id="conErr6"><span>6</span>번 수신기 통신장애</li>
                <li id="conErr7"><span>7</span>번 수신기 통신장애</li>
                <li id="conErr8"><span>8</span>번 수신기 통신장애</li>
                <li id="conErr9"><span>9</span>번 수신기 통신장애</li>
                <li id="conErr10"><span>10</span>번 수신기 통신장애</li>
            </ul>

【问题讨论】：

我刚刚在 Internet Explorer 11.134.17763.0 中对此进行了测试，它的行为似乎与 Chrome 相同。您预计会发生什么，目前您会发生什么？
@Obsidian Age 在 ie11 中，仅显示 1 行。 li 元素溢出。
嗯，我看不到你上面的代码。您能否确保您提供了问题的minimal, complete, and verifiable example？ :)
@ObsidianAge 哦，父 div 有 'position:fixed;bottom:0;left;0' 选项。我找到了原因，但我不知道如何解决。

标签： css flexbox internet-explorer-11

【解决方案1】：

我发现你可以将宽度属性添加到父 div，然后它将在 IE 上运行。这是我的测试代码。 CSS。

<style>
    ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-flow: row wrap-reverse;
    }

    li {
        display: inline-block;
        width: 200px;
        height: 30px;
        font-size: 20px;
    }

    span {
        font-size: 28px;
    }

</style>

HTML。

 <div style="position:fixed;bottom:0;left:0;width: 100%;">
    <ul>
        <li id="conErr1"><span>1</span>번 수신기 통신장애</li>
        <li id="conErr2"><span>2</span>번 수신기 통신장애</li>
        <li id="conErr3"><span>3</span>번 수신기 통신장애</li>
        <li id="conErr4"><span>4</span>번 수신기 통신장애</li>
        <li id="conErr5"><span>5</span>번 수신기 통신장애</li>
        <li id="conErr6"><span>6</span>번 수신기 통신장애</li>
        <li id="conErr7"><span>7</span>번 수신기 통신장애</li>
        <li id="conErr8"><span>8</span>번 수신기 통신장애</li>
        <li id="conErr9"><span>9</span>번 수신기 통신장애</li>
        <li id="conErr10"><span>10</span>번 수신기 통신장애</li>
    </ul>
</div>

【讨论】：

谢谢。你的解释真的很容易理解。