列弹性重叠后的 IE 11 元素

Question

我想了解在 IE 11 上哪里出了问题。

我的页脚与页面的主要内容重叠，主要内容没有固定高度，因为填充它的项目可能不同。这在 chrome 上看起来不错，但在 IE 11 上重叠。这是一个片段和一个 jsbin link.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .navbar {
            margin-bottom: 15px !important;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>

    <footer id="footer">
        <div class="container-fluid mw-100">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

正在寻找解决此问题的方法，并寻找一些文档来理解并希望将来能够帮助其他人解决类似问题。谢谢。

Answer 1

查看此代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .navbar {
            margin-bottom: 15px !important;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>



    <footer id="footer">
        <div class="container-fluid mw-100 row">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

您需要从正文样式中删除 height: 100% !important;。

Answer 2

根据将弹性行布局更改为 column-based 弹性容器的教程，您应该添加类 d-flex, flex-column, my-flex-container-column.

你的解决方案只有

<body role="document" class="d-flex flex-column">

所以，改为

class="d-flex flex-column my-flex-container-column"

读书真好tutorial

!important 应很少使用，仅当您覆盖现有 css 属性时才使用 。在两种分辨率下都进行了测试。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>test</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
    <style>
        html,
        body {
            width:100%;
            height:100%;
            margin: 0;
            padding: 0;
            border: 0;
        }

        .navbar {
            margin-bottom: 15px;
            position: relative;
        }

        .clearfix:before,
        .clearfix:after,
        .dl-horizontal dd:before,
        .dl-horizontal dd:after,
        .container:before,
        .container:after,
        .container-fluid:before,
        .container-fluid:after,
        .row:before,
        .row:after,
        .form-horizontal .form-group:before,
        .form-horizontal .form-group:after,
        .nav:before,
        .nav:after,
        .navbar:before,
        .navbar:after,
        .navbar-header:before,
        .navbar-header:after,
        .navbar-collapse:before,
        .navbar-collapse:after,
        .pager:before,
        .pager:after {
            content: " ";
            display: table;
        }

        .navbar-header {
            float: left;
        }

        #masthead .navbar-header .logo {
            width: 266px;
            height: 70px;
            display: block;
        }

        #footer {
            background-color: antiquewhite;
        }

        .breadcrumbs {
            list-style-type: none;
            vertical-align: top;
        }
    </style>
</head>

<body role="document" class="d-flex flex-column my-flex-container-column">
    <nav id="masthead" class="navbar navbar-default" role="banner">
        <div class="navbar-header">
            <a class="logo">stuff here ....</a>
        </div>
    </nav>

    <div class="container-fluid flex-fill w-100 pb-3 border border-primary">

        <div class="d-flex flex-column">

            <div class="breadcrumbs">
                whatevs...
            </div>

            <div class="row">
                <div class="col-xs-12 col-md-8 d-flex flex-column">

                    <div class="text-h1a px-2 my-3 mt-md-5 mb-md-0">
                        <h1 class="m-0 mt-1 font-size-24px">Hello</h1>
                        <div class="d-flex flex-column flex-md-row">
                            <div class="flex-fill font-size-14px font-size-sm-16px">
                                <span>there</span>
                                <span class="ml-2">general kenobi</span>
                            </div>
                        </div>
                    </div>


                    <div class="mt-2 mt-md-0">
                        something here
                        and another thing here
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        did we forget about this?
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.
                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                        <br />
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.


                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                        cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                        ipsam sapiente dolorum tenetur vel distinctio.

                    </div>
                </div>

                <div class="col-xs-12 col-md-4 pr-md-0">
                    SIDE Lorem ipsum dolor sit, amet consectetur adipisicing elit. Modi sint adipisci eligendi qui
                    cumque, corporis minus, alias, accusantium quasi perspiciatis repellat. Explicabo ut natus,
                    ipsam sapiente dolorum tenetur vel distinctio.
                </div>

            </div>

        </div>


    </div>

    <footer id="footer">
        <div class="container-fluid mw-100">
            <ul>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
                <li>ABout us</li>
            </ul>
        </div>
    </footer>
</body>

</html>

列弹性重叠后的 IE 11 元素

IE 11 element after column flex overlap

html

css

flexbox

twitter-bootstrap

internet-explorer-11