html - 滚动条在 Internet Explorer 中创建边距

Question

所以我一直在用代码在 div 中做一个简单的滚动

overflow: auto;

但是，我不知道为什么，当在 Internet Explorer 中打开时，滚动条会在右侧创建边距。它在 chrome 和 safari 上都运行良好。

这是我处理的代码:HTML

     <div class="drag" id="second">
    <div class="dragheader" id="headerTwo">
      <p>Pre-story</p><div><a id="secondX" href="#">B</a></div></div>
      <div class="window" id="windowTwo">
        <p>
          It was a huge project for the planet earth.
          Humanity's first attempt to actively reach out to outer-space<br><br>
          : A 10year-mission to connect with other life forms and return to earth.
          Many Astronauts were involved in this project and on this spaceship, our spaceman X was born.
        </p>
        <div class="smallImg"><img src="img/baby.gif"/></div>
        <p class="cursor">
          However, as I said, our story started after this one ended.
          Every astronaut was killed by an unfortunate incident leaving young X all alone.<br>
          At that moment, our story begins.
        </p>
      </div>
  </div>

CSS

    .drag {
  position: absolute;
  z-index: 100;
  -webkit-animation: imgShadow 1.6s infinite;
  -o-animation: imgShadow 1.6s infinite;
  animation: imgShadow 1.6s infinite;
  border: #a481f1 3px solid;
  background: #000051;
  width: auto;
  display: none;
}
.dragheader {
  width: auto;
  height: 20px;
  background: #a481f1;
  z-index: 100;
  cursor: grab;
}
.dragheader p{
  float: right;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 1%;
  font-size: 16px;
  color: #00008b;
  font-weight: bolder;
  -webkit-animation: darkTextShadow 1.6s infinite;
  -o-animation: darkTextShadow 1.6s infinite;
  animation: darkTextShadow 1.6s infinite;
}
.dragheader div{
  float: left;
  margin-left: 1.4%;
}
.dragheader div a{
  -webkit-animation: darkTextShadow 1.6s infinite;
  -o-animation: darkTextShadow 1.6s infinite;
  animation: darkTextShadow 1.6s infinite;
  font-family: 'Untitled1', sans-serif;
  color: #00008b;
  font-size: 18px;
  text-decoration: none;
}
.window {
  width: 500px;
  height: 300px;
  z-index: 100;
  padding: 3%;
}
.window p{
  -webkit-animation: smallTextShadow 1.6s infinite;
  -o-animation: smallTextShadow 1.6s infinite;
  animation: smallTextShadow 1.6s infinite;
  margin: 0;
}
#first{
  -webkit-transform: translate(10%, 45%);
  -moz-transform: translate(10%, 45%);
  -ms-transform: translate(10%, 45%);
  -o-transform: translate(10%, 45%);
  transform: translate(10%, 45%);
}
#first .cursor{
  position: absolute;
  top: 0;
  margin-top: 8%;
  margin-right: 5%;
}
#second{
  -webkit-transform: translate(150%, 15%);
  -moz-transform: translate(100%, 15%);
  -ms-transform: translate(100%, 15%);
  -o-transform: translate(100%, 15%);
  transform: translate(250%, 15%);
}
#headerTwo{
  width: auto;
}
#windowTwo{
  max-width: 350px;
  height: 500px;
  overflow: auto;
  scrollbar-face-color:#2fccad;
  scrollbar-arrow-color:#2fccad;
  scrollbar-track-color:transparent;
  scrollbar-shadow-color:#2fccad;
  scrollbar-highlight-color:#2fccad;
  scrollbar-3dlight-color:#2fccad;
  scrollbar-darkshadow-Color:#2fccad;

}

#windowTwo img{
  width: 50%;
  display: inline-block;
}
.smallImg{
  position: relative;
  text-align: center;
  margin-bottom: 2%;
}

你可以在这里看到这个网站: http://joie1234.github.io

我试过滚动填充和更改宽度参数但没有任何效果...

感谢您的阅读；)

Answer 1

检查下面的 CSS(这仅适用于 IE 浏览器 10+)，

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
#windowTwo {
   margin-right : -75px;
 }
}