显示浮动对象的不需要的水平滚动条 - 仅在 IE11 中

Question

我编码的这个网站 www.malthestigaard.com 只在 IE11 中给我一个不需要的滚动条（据我所知）。如何摆脱它？

也许是浮动元素以某种方式造成的？

我在 CSS 中也有一些媒体查询，但它们在这里似乎无关紧要，如果我需要 post 请告诉我。你当然可以在网站上看到完整的代码。

HTML

<div class="wrapper">
    <nav>
        <div class="content-wrapper">
            <div class=textclear>
                <div class="alignleft">
                    <h1 class="firsth1"> <a href="http://www.malthestigaard.com"> MALTHE STIGAARD </a></h1></div>
                <div class="alignright">
                    <ul>
                        <h1><li> <a href="#work" type="button"> WORK </a></li><li> <a href="#about" type="button"> ABOUT </a></li><li> <a href="#contact" type="button"> CONTACT </a></li></h1></ul>
                </div>
            </div>
        </div>
    </nav>

CSS

.wrapper {
    width: 95%;
    margin-left: auto;
    margin-right: auto
}

.content-wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 80%
}

.content-wrapper,
.copytext,
.wrapper {
    margin-left: auto;
    margin-right: auto
}

nav h1 {
    color: #00697f;
    font-size: 1.5em;
    font-weight: 700;
    -webkit-margin-before: .83em;
    -webkit-margin-after: .83em
}

#banner,
.textclear {
    overflow: auto
}

.alignleft,
.circular {
    float: left
}

.alignright {
    float: right
}

ul {
    padding: 0;
    margin: 0
}

li {
    list-style-type: none;
    margin: 0;
    padding: 5px;
    display: inline
}

h1 {
    font-size: 200%!important;
    width: 100%
}

.firsth1,
nav h1 {
    display: none
}

Answer 1

overflow: auto 是解析带有浮点数的容器的一些 hack。你可以像这样摆脱滚动条。变化：

#banner,
.textclear {
    overflow: auto
}

至：

#banner {
   clear: both;
}

显示浮动对象的不需要的水平滚动条 - 仅在 IE11 中

Unwanted horizontal scroll bar showing up with floating objects - only in IE11

html

css

jquery

scrollbar

css-float