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

时间:2016-12-01 16:12:42

标签: jquery html5 css3 css-float scrollbar

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

enter image description here

也许浮动元素以某种方式导致它?

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

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
}

1 个答案:

答案 0 :(得分:0)

overflow: auto对于使用浮点数解析容器有点麻烦。你可以像这样摆脱滚动条。变化:

#banner,
.textclear {
    overflow: auto
}

为:

#banner {
   clear: both;
}