Полоса прокрутки создать поле в Internet Explorer - PullRequest
Новая
       16

Полоса прокрутки создать поле в Internet Explorer

2 голосов
/ 22 сентября 2019

Итак, я работал над простой прокруткой в ​​div с кодом 

overflow: auto;

Однако я не знаю почему, но при открытии в интернете прокрутка создает поле с правой стороны.исследователь.Он отлично работает как на 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

Я пробовал заполнение прокруткой и изменение параметров ширины, но ничего не работает ...

Спасибо за чтение;)

1 Ответ

0 голосов
/ 22 сентября 2019

Проверьте ниже CSS (Это относится только к браузеру IE 10+), 

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