Question

您好我的代码在Firefox中正常工作，但在IE中我得到默认的垂直滚动条。当我最小化页面时，我得到了我想要的垂直和水平滚动条，但在IE中我得到了一个额外的垂直滚动条。我怎样才能在IE中摆脱它？我正在使用CSS重置。这是我的CSS：

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    /*font:inherit;*/
    font-size:100%;
    vertical-align:baseline;
    text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    /*list-style:none;*/
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
    content:’’;
    content:none;
}
/* remember to define visible focus styles! 
:focus{
    outline:?????;
} */

/* remember to highlight inserts somehow! */
ins{
    text-decoration:none;
}
del{
    text-decoration:line-through;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

/*CUSTOM*/

a {
    /*color:#365C8C;*/
}

a:hover {
    text-decoration:underline;
    /*color:#365C8C;*/
}

p {
    font:.85em arial,regular;
}

ul {
    font:.85em arial,regular;
}

.bar {
    background-color:#365C8C;
    height:30px;
    width:100%;
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    /*overflow-x:hidden;*/
    min-width:1225px;   
}

body {
    position:relative;
    padding:0 0 0 0;
    margin:0 0 0 0;
    overflow:auto;
    height:100%;
    width:100%;
    background-color:#ADCCEB;
    /*background-color:black;*/
    /*background: url(background.png);*
    /*background-size:100%;*/
}

.bold {
    font-weight:bold;
}

.contentcontainer {
    width:825px;
    height:910px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    /*background-color:red;*/
}

.extcontentcontainer {
    width:825px;
    height:645px;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding-top:0px;
    /*background-color:red;*/
}

img.fullbackground {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%;
    min-width:1225px;   
    height:100%;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

img.extfullbackground {
    position:absolute;
    z-index:-1;
    top:0;
    left:0;
    width:100%; 
    min-width:1225px;
    height:100%; 
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

以下是一些HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pathfinder Outage Page</title>
    <link rel="stylesheet" href="boilerplate.css">
</head>

<body class="fullbackground">
    <img class="fullbackground" src="background.png" />
    <div class="topbackground">
            <div class="top">
                <div class="topleft">
                    <img class="pf_logo" src="pathfinder_logo.png"/>
                </div>
                <div class="topmiddle">
                    <h1 class="title">Pathfinder is Temporarily Unavailable</h1>
                </div>
                <div class="topright" ></div>
            </div>
        </div>
        <div class="bar"></div>
        <div style="width:1225px; height:910px; padding-top:0px; margin-top:0px; margin-left:auto; margin-right:auto;">
        <div class="contentcontainer">

Answer 1

卸下：

overflow: auto;

来自CSS中的正文。

那应该解决它。

Answer 2

使用HTML中内置的“if IE”放入自定义css文件来修复IE中的问题，如：

<!--[if IE]>
    <link rel="stylesheet" href="ie-specific.css">
<![endif]-->

Answer 3

您的body和div似乎都在生成滚动条，因为您将height设置为100％，正文中的div大于正文，而正文它本身比你的窗口大，所以你有两个溢出的元素在彼此里面。在你的div中你只要摆脱height: 100%就可以了。

Answer 4

检查Intranet站点的兼容模式是否已启用。我有这个问题，当我禁用兼容模式时，第二个滚动条就消失了。

Answer 5

我认为还有另一种方法可以解决此问题，而不会摆脱overflow: auto风格。我对该问题的理解以及建议的解决方法是基于这篇不错的文章，您可以查看更多详细信息：https://remysharp.com/2008/01/21/fixing-ie-overflow-problem

我理解问题的方式是在Chrome和Firefox中，滚动条绘制在容器外部，因此滚动条在显示时不会影响容器的宽度。在IE中，滚动条绘制在容器内部，其宽度/高度导致容器溢出并显示第二个滚动条。

发生这种情况的典型用例是在垂直滚动（行太多）和水平滚动（列太多）的表上：由于列的长列表已具有水平滚动的表主体，将添加第二个水平滚动，因为在表主体内部绘制时将增加垂直滚动宽度将添加的x溢出（对于行）。

我尝试过的似乎有效的技巧之一是在容器中添加填充，以使其能够绘制滚动条而不会溢出：

要修复双水平滚动条，请执行以下操作：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .container-overflowing-vertically-class {
      padding-right: 20px;
    }
  }

要修复双垂直滚动条：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .container-overflowing-horizontally-class {
      padding-bottom: 20px;
    }
  }

IE中有两个垂直滚动条

5 个答案: