IE11：输入字段的文本滑到底部边框下方

Question

最近我注意到我的一些代码在 chrome 或 firefox 等浏览器中运行良好，使 Internet Explorer 做一些奇怪的事情。其中之一如下：
我有一个包含三个输入字段的页面。输入显示正确，但当我输入内容时，值会滑到底部边框下方。
另一个小错误是底部的三个小按钮应该排成一行。但在 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;.

IE11：输入字段的文本滑到底部边框下方

IE11: Text of input field slips below the bottom border

html

css

sass

internet-explorer-11