html - 为什么子元素不适合父元素(导致滚动条)？

Question

我有一个子元素，它不适合父元素(看起来像 1px)，导致垂直滚动条。该问题只发生在旧版本的 Windows/Internet Explorer 中。我认为是 Windows 7。

更多细节:<label for="toggle">Menu</label>是带有滚动条的元素，因为它似乎不适合 <header> .但是header的高度由 label 决定，所以我不明白这是为什么。

JS Fiddle 示例:https://jsfiddle.net/a9zkgyx7/

<header>
    <div class="logo"><a href="index.html"><img src="resources/logo.svg"></a></div>
    <input type="checkbox" id="toggle">
    <label for="toggle">Menu</label>
    <nav>
        <ul>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
            <li><a href="link.html">Text</a></li>
        </ul>   
    </nav>
</header>





 article, aside, figure, footer, header, main, nav, section {
        display: block;
        }

header { 
    padding:0 3.6rem;
    border-bottom:1px solid;
    overflow:auto;
    }

.logo {
    float:left;
    width:13.2rem;
    }

#toggle {
    display: none;
    }

#toggle ~ label {
    display: inline-block;
    cursor: pointer;
    float:right;
    font-size:2.4rem;
    line-height:7.1rem;
    }


nav {
    height:0;
    overflow:hidden;
    position:absolute;
    top:7.2rem;
    left:0;
    right:0;
    background-color:rgb(255,255,255);
    z-index:102;
    text-align:center;
    font-size:4.8rem;
    line-height:1.75em;
    }

#toggle:checked ~ nav {
    height: 100%;
    }

Answer 1

在您的 css header 中，您必须将 overflow:auto; 更改为 overflow:hidden; 这将隐藏您的滚动条。