4

嗨，我的代码在 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">
4

5 回答 5

9

消除：

overflow: auto;

来自 CSS 中的正文。

那应该解决它。

于 2013-06-14T20:02:07.070 回答
0

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

<!--[if IE]>
    <link rel="stylesheet" href="ie-specific.css">
<![endif]-->
于 2013-06-14T19:58:36.277 回答
0

看起来你body和你div都在产生滚动条，因为你将 设置height为 100%，body 内的 div 比 body 大，并且 body 本身比你的 window 大，所以你有两个相互溢出的元素。只需摆脱height: 100%您的 div nad 就可以了。

于 2013-06-14T20:04:40.613 回答
0

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

于 2016-02-23T23:20:32.570 回答
0

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

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

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

我尝试过并且似乎有效的技巧之一是向容器添加填充以允许它绘制滚动条而不会溢出：

  • 修复双水平滚动条：
@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;
    }
  }
于 2019-08-07T16:32:21.993 回答