IE11: текст поля ввода скользит ниже нижней границы

Question

Недавно я заметил, что часть моего кода, который хорошо работает в браузерах, таких как chrome или firefox, заставляет интернет-обозревателя делать некоторые странные вещи.Одна из этих вещей:
У меня есть страница с тремя полями ввода.Входные данные отображаются правильно, но когда я что-то набираю, значение скользит ниже нижней границы.
Еще одна небольшая ошибка заключается в том, что три маленькие кнопки внизу должны быть в одной строке.Но в IE кнопка быстрой пересылки разбита на следующую строку.
Я не смог найти код, который может не работать в IE11.Есть идеи?

Почему-то мне не удалось воспроизвести эту вещь на таких сайтах, как jsfiddle.Вот почему я также приложил фотографии.

$inputFontSize: 8vw;
//Verhindern, dass Inputfeld eingerahmt wird, wenn es den Fokus erhält.
*:focus {
  outline: none;
}

body {
  height: 100vh;
}

#wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  background: url("https://ibin.co/w800/4JgKBfiSuGat.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}

#buttons {
  position: absolute;
  bottom: -5%;
  z-index: 20;
  width: 100%;
}

.control-buttons {
  display: inline-block;
  background-color: transparent !important;
  border-color: black !important;
  color: black !important;
}

#faster-div {
  display: contents;
}

#foreground-mountains {
  position: absolute;
  z-index: 10;
  bottom: 0;
  left: 0;
  background-size: cover;
  width: 100vw;
  height: 20%;
  background: url("https://ibin.co/4JgKSDfGvPRf.png") no-repeat;
}

#dreieck-inner {
  position: relative;
}

.result-empty {
  border: none !important;
}

.result-correct {
  border: solid 3px green !important;
}

.result-false {
  border: solid 3px red !important;
}


/* Rechts unten */

#input3 {
  position: absolute;
  width: 20%;
  height: 20%;
  z-index: 2;
  font-size: $inputFontSize;
  text-align: center;
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.75);
  border: none;
  right: 22%;
  bottom: 15%;
}


/* Links unten */

#input2 {
  position: absolute;
  width: 20%;
  height: 20%;
  z-index: 2;
  font-size: $inputFontSize;
  text-align: center;
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.75);
  border: none;
  left: 18%;
  bottom: 15%;
}


/* Oben */

#input1 {
  position: absolute;
  width: 20%;
  z-index: 2;
  height: 20%;
  font-size: $inputFontSize;
  text-align: center;
  background-color: transparent;
  -webkit-box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 25px 1px rgba(0, 0, 0, 0.75);
  border: none;
  right: 42%;
  top: 35%;
}

#rowDisplay {
  position: absolute;
  z-index: 2;
  font-size: 250%;
  right: 50%;
  bottom: 35%;
}

.topOperator {
  position: absolute;
  z-index: 2;
  right: 37%;
  bottom: 33%;
  font-size: 500%;
}

.bottomOperator {
  position: absolute;
  z-index: 2;
  right: 50%;
  bottom: 17%;
  font-size: 500%;
}

#timer {
  position: absolute;
  font-size: 250%;
  left: 43%;
  top: 10%;
}

#dreieck-container {
  background-image: url("https://ibin.co/w800/4JgKmVu4ZYX1.png");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  background-color: transparent !important;
  
      $dc-height: 700px;
    height: $dc-height;
    background-color: transparent;
    width: calc(#{$dc-height} * 1.46);
    left: 20%;
    bottom: 5%;
}

/*@media only screen and (min-width: 1024px) {
  #dreieck-container {
    $dc-height: 700px;
    height: $dc-height;
    background-color: transparent;
    width: calc(#{$dc-height} * 1.46);
    left: 20%;
    bottom: 5%;
  }
}*/

<div id="wrapper">
  <div id="dreieck-container">
    <div class="dreieck">
      <div class="dreieck-inner">
        <span class="clickable" id="timer"></span>

        <input id="input1" type="text">

        <span id="operator"></span>

        <input id="input2" type="text">
        <input id="input3" type="text">

        <div id="buttons">
          <button id="pauseButton" class="btn btn-primary control-buttons">
                        <i class="far fa-pause-circle"></i>
                    </button>
          <button id="continueButton" class="btn btn-primary control-buttons">
                        <i class="far fa-play-circle"></i>
                    </button>
          <div id="faster-div">
            <button id="fasterButton" class="btn btn-primary control-buttons">
                            <i class="fas fa-fast-forward"></i>
                        </button>
          </div>
        </div>
      </div>
      <div>
        <span id="score"></span>
      </div>
    </div>
  </div>
  <div id="foreground-mountains"></div>
</div>

Вот как это выглядит на IE11:

Answer 1

Спасибо @Jacob за отличный совет.
Действительно, был какой-то особый стиль UA, но это не было отступом или полем.
Мне пришлось установить line-height: normal;.