代码之家 › 专栏 › 技术社区 › user1589188

在IE11上,具有最大车身高度和弯曲度的div不能正常工作

internet-explorer-11 flexbox css html

user1589188 · 技术社区 · 7 年前

我有以下的css和html作为最小的复制问题。在铬合金上都很好。不是IE11。有没有办法修复css和html,使其同时在chrome和ie11上工作?

<html>
    <style>
        .max-box {
            background-color: #00e;
            width: 100px;
            max-height: 80%;
            padding: 5px;
            display: flex;
            flex: 1 1 auto;
        }
        .fixed-box {
            background-color: #00e;
            width: 100px;
            height: 100px;
            padding: 5px;
            display: flex;
            flex: 1 1 auto;
        }
        .wrapper {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
        }
        .content {
            background-color: #0e0;
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            overflow: auto;
        }
        .footer {
            background-color: #e00;
            display: flex;
            flex: 0 0 auto;
        }
    </style>
    <body>
        <div class="max-box" style="float: left">
            <div class="wrapper">
                <div class="content">
                    <span>a1</span><span>a2</span>
                </div>
                <div class="footer">
                    <span>b1</span><span>b2</span>
                </div>
            </div>
        </div>
        <div class="max-box" style="float: left">
            <div class="wrapper">
                <div class="content">
                    <span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
                </div>
                <div class="footer">
                    <span>b1</span><span>b2</span>
                </div>
            </div>
        </div>
        <div class="fixed-box">
            <div class="wrapper">
                <div class="content">
                    <span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
                </div>
                <div class="footer">
                    <span>b1</span><span>b2</span>
                </div>
            </div>
        </div>
    </body>
</html>

因此,chrome的性能要求如下:

如果内容很少,框1将不会占用下面的空间。
框2将占用浏览器最多80%的高度,并且内容是可滚动的。如果浏览器高度更改,则响应。
框3为固定高度,内容可滚动,间距与框2相同。

IE11失败的是:

当浏览器高度更改为小于内容时,框1和框2不会使内容可滚动。
框3的内容是可滚动的,但所有的值都是局促的。

1 回复 | 直到 7 年前

LukáÅ¡ Gibo Vaic 7 年前

因为这似乎是没有答案的,我会尽力给你我的两分钱。ie和其他浏览器通常需要autoprefixer才能使flexbox正常工作。请尝试以下操作,这正是通过autoprefixer运行的代码

        .max-box {
            background-color: #00e;
            width: 100px;
            max-height: 80%;
            padding: 5px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
        }
        .fixed-box {
            background-color: #00e;
            width: 100px;
            height: 100px;
            padding: 5px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
        }
        .wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
        .content {
            background-color: #0e0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 1;
                -ms-flex: 1 1 auto;
                    flex: 1 1 auto;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            overflow: auto;
        }
        .footer {
            background-color: #e00;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                    flex: 0 0 auto;
        }