Internet Explorer 中的垂直滚动条

【问题标题】：Vertical scrollbars in Internet ExplorerInternet Explorer 中的垂直滚动条
【发布时间】：2017-11-01 04:51:30
【问题描述】：

我试图确保此页面以100% 的高度和宽度显示，但在这样做时，如代码所示，会出现滚动条。

在 Chrome 中，行为有所不同，并且符合预期。看起来它应该很容易处理，但我似乎无法让它工作。

要复制问题，只需在 IE 中运行此代码。 

@import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,700');
body,
html {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Titillium Web', sans-serif;

}


body {
    background: #F1F1F1 url('http://via.placeholder.com/1900');
    background-size: cover;
}

.main-bg {
    height: 100%;
    width: 80%;
    min-width: 500px;
    position: absolute;
    z-index: -9999;
}

.main-container {
    height: 100%;
    width: 80%;
    min-width: 500px;
}

.large-only,
.small-only,
.tiny-only {
    display: none;
}

.text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

.text-container-parent {
    position: relative;
}

@media screen and (min-width: 1280px) {
    .large-only {
        display: block;
    }
    .text-container-parent {
        width: 55%;
    }
    .text-container {
        padding-bottom: 8vh;
    }
    .text-word.massive {
        font-size: 5.2vw;
        letter-spacing: -5px;
    }
    body {
        font-size: 1.68vw;
    }
    .button-div {
        padding-top: 2.6vw;
    }
}

@media screen and (min-width: 721px) and (max-width: 1279px) {
    .small-only {
        display: block;
    }
    .text-container-parent {
        width: 80%;
    }
    .text-word.massive {
        letter-spacing: -2px;
        font-size: 7vw;
    }
    body {
        font-size: 2.5vw;
    }
    .button-div {
        padding-top: 3.5vw;
    }
}

@media screen and (max-width: 720px) {
    .tiny-only {
        display: block;
    }
    .text-container-parent {
        width: 100%;
    }
    .text-word.massive {
        letter-spacing: -2px;
        font-size: 12.2vw;
    }
    body {
        font-size: 3.5vw;
    }
    .button-div {
        padding-top: 6.1vw;
    }
    .text-container {
        position: static;
        transform: none!important;
        margin: auto;
        padding-top: 2em;
    }
    .title-row {
        margin: auto;
    }
    .button-div {
        margin: auto;
    }
    .logo-and-title {
        margin: auto;
    }
}

@media screen and (max-width: 500px) {
    .main-container {
        height: 100%!important;
        width: 100%!important;
        margin: auto!important;
        min-width: inherit!important;
    }
    body {
        background: #F1F1F1;
    }

    .main-bg {
        min-width: inherit!important;
        width: 100%;
        }
}

.text-container-parent {
    height: 100%;
}

.no-select {
    user-select: none;
    cursor: default;
    -ms-user-select: none;
}

.no-select-buttons {
    user-select: none;
    -ms-user-select: none;
}

img.logo-large {
    height: auto;
    max-width: 100%;
    width: 32vh;
    max-height: 32vh;
    text-align: center;
}

img.inline {
    max-width: 1.5em;
    max-height: 1.5em;
    margin: -0.25em;
    padding: 0 0.5em;
}

.text-word {
    color: white;
}

.text-word.massive {
    font-weight: 700;
}

.text-word.large {
    font-weight: 300;
}

.text-word.error {
    margin-left: -5px;
}

.text-word.four-zero-four {
    color: #90B774;
}

.button-div {}

.button {
    display: inline-block;
    text-decoration: none;
    color: white;
    background: #586067;
    margin: 0 0.75em 0.25em 0;
    padding: 0.5em;
    transition: all 0.2s ease;
}

.button:hover {
    background: #3c444b;
    transition: all 0.2s ease;
}

.button:active {
    background: #607352;
    transition: all 0.2s ease;
}


.block-level-div {
    display: table;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Error 404</title>
    <link rel="stylesheet" href="CSS/404.min.css">
</head>
<body>
<div class="main-container">
    <div class="svg-background">
    <svg class='main-bg' viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="0,0 0,100 55,100 100,0" style="fill: rgba(29, 37, 44, 0.9);" class="large-only" />
        <polygon points="0,0 0,100 80,100 100,0" style="fill: rgba(29, 37, 44, 0.9);" class="small-only" />
        <polygon points="0,0 0,100 100,100 100,0" style="fill: rgba(29, 37, 44, 0.9);;" class="tiny-only" />
    </svg>
    </div>
    <div class="text-container-parent">
            <div class="text-container">
            <div style="margin: auto" class="block-level-div">
                <div class="logo-and-title no-select block-level-div">
                <img src="http://via.placeholder.com/300" class="no-select logo-large" />
                <div class="title-row block-level-div">
                    <span class="text-word massive error">ERROR </span>
                    <span class="text-word massive four-zero-four">404</span>
                </div>
                </div>
                <div class="text-word large no-select block-level-div">OOPS...Looks like you may have taken a wrong turn.</div>
                <div class="text-word large no-select block-level-div">Don't worry, it happens to the best of us.</div>
                <div class="button-div no-select-buttons block-level-div">
                    <a href="https://google.com.com/" class="button">Take Me Home! <img src="http://via.placeholder.com/300" class="inline" /></a>
                    <a href="mailto:me@google.com" class="button">Report A Problem</a>
                </div>
            </div>
            </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

    标签： html css internet-explorer


    【解决方案1】：

    要在 Internet Explorer 中隐藏滚动条，您只需将 overflow-y: hidden 添加到 body：

    @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,700');
body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
}

body {
  background: #F1F1F1 url('http://via.placeholder.com/1900');
  background-size: cover;
  overflow-y: hidden;
}

.main-bg {
  height: 100%;
  width: 80%;
  min-width: 500px;
  position: absolute;
  z-index: -9999;
}

.main-container {
  height: 100%;
  width: 80%;
  min-width: 500px;
}

.large-only,
.small-only,
.tiny-only {
  display: none;
}

.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}

.text-container-parent {
  position: relative;
}

@media screen and (min-width: 1280px) {
  .large-only {
    display: block;
  }
  .text-container-parent {
    width: 55%;
  }
  .text-container {
    padding-bottom: 8vh;
  }
  .text-word.massive {
    font-size: 5.2vw;
    letter-spacing: -5px;
  }
  body {
    font-size: 1.68vw;
  }
  .button-div {
    padding-top: 2.6vw;
  }
}

@media screen and (min-width: 721px) and (max-width: 1279px) {
  .small-only {
    display: block;
  }
  .text-container-parent {
    width: 80%;
  }
  .text-word.massive {
    letter-spacing: -2px;
    font-size: 7vw;
  }
  body {
    font-size: 2.5vw;
  }
  .button-div {
    padding-top: 3.5vw;
  }
}

@media screen and (max-width: 720px) {
  .tiny-only {
    display: block;
  }
  .text-container-parent {
    width: 100%;
  }
  .text-word.massive {
    letter-spacing: -2px;
    font-size: 12.2vw;
  }
  body {
    font-size: 3.5vw;
  }
  .button-div {
    padding-top: 6.1vw;
  }
  .text-container {
    position: static;
    transform: none!important;
    margin: auto;
    padding-top: 2em;
  }
  .title-row {
    margin: auto;
  }
  .button-div {
    margin: auto;
  }
  .logo-and-title {
    margin: auto;
  }
}

@media screen and (max-width: 500px) {
  .main-container {
    height: 100%!important;
    width: 100%!important;
    margin: auto!important;
    min-width: inherit!important;
  }
  body {
    background: #F1F1F1;
  }
  .main-bg {
    min-width: inherit!important;
    width: 100%;
  }
}

.text-container-parent {
  height: 100%;
}

.no-select {
  user-select: none;
  cursor: default;
  -ms-user-select: none;
}

.no-select-buttons {
  user-select: none;
  -ms-user-select: none;
}

img.logo-large {
  height: auto;
  max-width: 100%;
  width: 32vh;
  max-height: 32vh;
  text-align: center;
}

img.inline {
  max-width: 1.5em;
  max-height: 1.5em;
  margin: -0.25em;
  padding: 0 0.5em;
}

.text-word {
  color: white;
}

.text-word.massive {
  font-weight: 700;
}

.text-word.large {
  font-weight: 300;
}

.text-word.error {
  margin-left: -5px;
}

.text-word.four-zero-four {
  color: #90B774;
}

.button-div {}

.button {
  display: inline-block;
  text-decoration: none;
  color: white;
  background: #586067;
  margin: 0 0.75em 0.25em 0;
  padding: 0.5em;
  transition: all 0.2s ease;
}

.button:hover {
  background: #3c444b;
  transition: all 0.2s ease;
}

.button:active {
  background: #607352;
  transition: all 0.2s ease;
}

.block-level-div {
  display: table;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>Error 404</title>
  <link rel="stylesheet" href="CSS/404.min.css">
</head>

<body>
  <div class="main-container">
    <div class="svg-background">
      <svg class='main-bg' viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="0,0 0,100 55,100 100,0" style="fill: rgba(29, 37, 44, 0.9);" class="large-only" />
        <polygon points="0,0 0,100 80,100 100,0" style="fill: rgba(29, 37, 44, 0.9);" class="small-only" />
        <polygon points="0,0 0,100 100,100 100,0" style="fill: rgba(29, 37, 44, 0.9);;" class="tiny-only" />
    </svg>
    </div>
    <div class="text-container-parent">
      <div class="text-container">
        <div style="margin: auto" class="block-level-div">
          <div class="logo-and-title no-select block-level-div">
            <img src="http://via.placeholder.com/300" class="no-select logo-large" />
            <div class="title-row block-level-div">
              <span class="text-word massive error">ERROR </span>
              <span class="text-word massive four-zero-four">404</span>
            </div>
          </div>
          <div class="text-word large no-select block-level-div">OOPS...Looks like you may have taken a wrong turn.</div>
          <div class="text-word large no-select block-level-div">Don't worry, it happens to the best of us.</div>
          <div class="button-div no-select-buttons block-level-div">
            <a href="https://google.com.com/" class="button">Take Me Home! <img src="http://via.placeholder.com/300" class="inline" /></a>
            <a href="mailto:me@google.com" class="button">Report A Problem</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

    然而，您的问题的真正“根源”是您在body 和html 上都设置了height 或100%，此外还添加了一个转换到.text-container 来弥补这一点。我建议删除此规则，然后在特定宽度处修改 .text-container 的填充：

    @media screen and (min-width: 1280px) {
  .text-container {
    padding-top: 5%;
  }
}

    这可以在下面看到：

    @import url('https://fonts.googleapis.com/css?family=Titillium+Web:300,700');
body,
html {
  /*height: 100%;*/
  padding: 0;
  margin: 0;
  font-family: 'Titillium Web', sans-serif;
}

body {
  background: #F1F1F1 url('http://via.placeholder.com/1900');
  background-size: cover;
}

.main-bg {
  height: 100%;
  width: 80%;
  min-width: 500px;
  position: absolute;
  z-index: -9999;
}

.main-container {
  height: 100%;
  width: 80%;
  min-width: 500px;
}

.large-only,
.small-only,
.tiny-only {
  display: none;
}

.text-container {
  /*
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  */
}

.text-container-parent {
  position: relative;
}

@media screen and (min-width: 1280px) {
  .text-container {
    padding-top: 5%;
  }
  .large-only {
    display: block;
  }
  .text-container-parent {
    width: 55%;
  }
  .text-container {
    padding-bottom: 8vh;
  }
  .text-word.massive {
    font-size: 5.2vw;
    letter-spacing: -5px;
  }
  body {
    font-size: 1.68vw;
  }
  .button-div {
    padding-top: 2.6vw;
  }
}

@media screen and (min-width: 721px) and (max-width: 1279px) {
  .small-only {
    display: block;
  }
  .text-container-parent {
    width: 80%;
  }
  .text-word.massive {
    letter-spacing: -2px;
    font-size: 7vw;
  }
  body {
    font-size: 2.5vw;
  }
  .button-div {
    padding-top: 3.5vw;
  }
}

@media screen and (max-width: 720px) {
  .tiny-only {
    display: block;
  }
  .text-container-parent {
    width: 100%;
  }
  .text-word.massive {
    letter-spacing: -2px;
    font-size: 12.2vw;
  }
  body {
    font-size: 3.5vw;
  }
  .button-div {
    padding-top: 6.1vw;
  }
  .text-container {
    position: static;
    transform: none!important;
    margin: auto;
    padding-top: 2em;
  }
  .title-row {
    margin: auto;
  }
  .button-div {
    margin: auto;
  }
  .logo-and-title {
    margin: auto;
  }
}

@media screen and (max-width: 500px) {
  .main-container {
    height: 100%!important;
    width: 100%!important;
    margin: auto!important;
    min-width: inherit!important;
  }
  body {
    background: #F1F1F1;
  }
  .main-bg {
    min-width: inherit!important;
    width: 100%;
  }
}

.text-container-parent {
  height: 100%;
}

.no-select {
  user-select: none;
  cursor: default;
  -ms-user-select: none;
}

.no-select-buttons {
  user-select: none;
  -ms-user-select: none;
}

img.logo-large {
  height: auto;
  max-width: 100%;
  width: 32vh;
  max-height: 32vh;
  text-align: center;
}

img.inline {
  max-width: 1.5em;
  max-height: 1.5em;
  margin: -0.25em;
  padding: 0 0.5em;
}

.text-word {
  color: white;
}

.text-word.massive {
  font-weight: 700;
}

.text-word.large {
  font-weight: 300;
}

.text-word.error {
  margin-left: -5px;
}

.text-word.four-zero-four {
  color: #90B774;
}

.button-div {}

.button {
  display: inline-block;
  text-decoration: none;
  color: white;
  background: #586067;
  margin: 0 0.75em 0.25em 0;
  padding: 0.5em;
  transition: all 0.2s ease;
}

.button:hover {
  background: #3c444b;
  transition: all 0.2s ease;
}

.button:active {
  background: #607352;
  transition: all 0.2s ease;
}

.block-level-div {
  display: table;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>Error 404</title>
  <link rel="stylesheet" href="CSS/404.min.css">
</head>

<body>
  <div class="main-container">
    <div class="svg-background">
      <svg class='main-bg' viewBox="0 0 100 100" preserveAspectRatio="none">
        <polygon points="0,0 0,100 55,100 100,0" style="fill: rgba(29, 37, 44, 0.9);" class="large-only" />
        <polygon points="0,0 0,100 80,100 100,0" style="fill: rgba(29, 37, 44, 0.9);" class="small-only" />
        <polygon points="0,0 0,100 100,100 100,0" style="fill: rgba(29, 37, 44, 0.9);;" class="tiny-only" />
    </svg>
    </div>
    <div class="text-container-parent">
      <div class="text-container">
        <div style="margin: auto" class="block-level-div">
          <div class="logo-and-title no-select block-level-div">
            <img src="http://via.placeholder.com/300" class="no-select logo-large" />
            <div class="title-row block-level-div">
              <span class="text-word massive error">ERROR </span>
              <span class="text-word massive four-zero-four">404</span>
            </div>
          </div>
          <div class="text-word large no-select block-level-div">OOPS...Looks like you may have taken a wrong turn.</div>
          <div class="text-word large no-select block-level-div">Don't worry, it happens to the best of us.</div>
          <div class="button-div no-select-buttons block-level-div">
            <a href="https://google.com.com/" class="button">Take Me Home! <img src="http://via.placeholder.com/300" class="inline" /></a>
            <a href="mailto:me@google.com" class="button">Report A Problem</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

    希望这会有所帮助！ :)

    【讨论】：

    • 我也爱你的！ :D 虽然，我的意图不是隐藏溢出的内容，而是防止随机溢出的内容。因为如果页面确实需要垂直溢出（横向移动设备），它将被隐藏。
    • 那么问题是你在body 和html 上都设置了height 或100%，然后使用转换后的.text-container 来抵消它。我建议取消此规则（由于background-size: cover，您的布局仍将是整页），然后调整文本本身。 overflow-y hidden 是一个快速修复，如果有必要，你总是可以通过使用 clearfix 来允许内部元素再次溢出:)
    • 谢谢破折号！听起来它会起作用。哦，我是怎么做的 /love/ IE 及其奇怪的特质。
    猜你喜欢
    • 1970-01-01
    • 2010-09-20
    • 2015-07-31
    • 1970-01-01
    • 1970-01-01
    • 2011-11-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode