Internet Explorer中的垂直滚动条

时间：2017-10-31 20:28:33

标签： html css internet-explorer

我正在尝试确保此页面显示为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>

1 个答案:

答案 0 :(得分：1)

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

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

然而，实际的＆＃39; root＆＃39;你的问题是你在height和100%上设置了body html，除了向.text-container添加转换之外弥补这一点。我建议删除此规则，然后在特定宽度修改.text-container的填充：

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

这可以在以下内容中看到：

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助！ ：）

相关问题
最新问题