列弹性重叠后的 IE 11 元素

Posted

技术标签:

【中文标题】列弹性重叠后的 IE 11 元素【英文标题】：IE 11 element after column flex overlap 【发布时间】：2020-11-29 20:51:38 【问题描述】：

我试图了解这在 IE 11 上哪里出错了。

我的页脚与页面的主要内容重叠，其中主要内容没有固定的高度，因为填充它的项目可能会有所不同。这在 chrome 上看起来很棒，但在 IE 11 上重叠。 这是一个 sn-p 和一个 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>

寻找解决方案以及一些文档以了解并希望能够在未来帮助其他人解决类似问题。谢谢。

【问题讨论】：

!important 应有充分的理由并尽可能少地使用。 height:100% on body 是 IE11 严格适用的。删除它并将其最终变成min-height。也删除!important。它可能是相似的：jsbin.com/vuhaxoniqi/1/edit?html,output 在我的屏幕上看起来不错。你的屏幕分辨率是多少？ @MariosNikolaou 1680x939 & 1366x657 G-Cyrillus 和 gpl 的答案都是正确的，并且在 IE 中运行良好。你可以选择一个接受。 body 上的 height: 100% !important; 是问题的主要原因。只删除该行也可以解决问题。 @G-Cyrillus 是的，谢谢，身高是个问题。你能给我指出一些关于这方面的好文档吗？我开始涉足 UI 【参考方案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;。

【讨论】：

这确实有效。谢谢你。为了找到有关此的良好文档，您会指出我在哪里？对 UI 游戏来说相当新。【参考方案2】：

从教程中将 flex 行布局更改为基于列的 flex 容器，您应该添加类 d-flex, flex-column, my-flex-container-column。

你的解决方案只有

&lt;body role="document" class="d-flex flex-column"&gt;

所以，换成

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>

【讨论】：

我假设 my-flex-container-column 与您提供的教程中的相同？顺便说一句，谢谢你的链接，我在写这篇文章时正在阅读它 @bgi 是的，如果你想将 body 标签的子元素作为列，那么你应该在 body 类中添加一个。本教程通过示例对其进行了展示，如果这是您想要的，它是更好的解决方案。 @bgi 我不认为这是height 的问题。如果你从你的 body 中删除类，你会注意到它可以与 height and width 设置为 100%

以上是关于列弹性重叠后的 IE 11 元素的主要内容，如果未能解决你的问题，请参考以下文章

IE中重叠元素的垂直对齐

Flex-direction 列使 flex 项目重叠 IE11

CSS IE 悬停效果 - 重叠元素、显示：块和崩溃

输出 可重叠元素数组的从小到大排列

在 IE11 中使 flexbox 继承适当的宽度

弹性布局