IE 10 不会在文本输入上重新应用填充

Question

我有一个关于文本输入和填充的 IE 10 特定问题，这让我很头疼。这是设置和正在发生的事情的文字描述，但这里也有一个运行示例：

https://jsfiddle.net/41nq3pt1/5/

我省略了下面的 CSS，因为它有点大，请看 JSFiddle。非常感谢您的帮助，我不仅在寻找解决方案，而且还在寻找 IE 10 行为怪异的原因。

说明

这是我的输入元素的 HTML 结构：

<div class="input">
  <label class="input__label" for="input">Floating label</label>
  <input class="input__input" type="text" id="input">
</div>

初始状态：在输入字段的初始状态，有一个绝对定位的标签，以input的垂直中间为中心。这是通过给它一个padding-top 来完成的。调整输入本身的填充，使闪烁的光标出现在与标签相同的高度。

输入有内容：当在字段中输入内容时，通过减小其padding-top 向上移动标签，同时增加输入的padding-top 使其向下移动一点。通过 Javascript 添加一个类来交替填充：

// jQuery 1.12.4
$('.input__input').on('keyup input', function() {
  if (!$(this).val() || $(this).val() == "") {
    $(this).closest('.input').removeClass('input--has-content');
  } else {
    $(this).closest('.input').addClass('input--has-content');
  }
});

删除内容后：当发现输入为空时，改变填充的类被移除，输入应处于初始状态。现在，尽管在所有当前的浏览器中工作，甚至低至 IE 8（我没有测试旧版本），IE 10 显然不会改变 input 元素的填充，请看这个截图： IE 10 vs. other browsers after step 4.

重现步骤

1. 点击输入框，看到光标在标签所在的同一行闪烁
2. 键入内容，标签应向上移动，光标略微向下移动
3. 按退格键删除所有输入
4. 标签再次向下移动，光标应在与步骤 1 相同的行上闪烁。

感谢您的帮助！

Answer 1

感谢Marks comment，我对行高进行了一些实验，最终得出了一个不依赖行高但使用透明边框解决问题的解决方案。

解决方案： https://jsfiddle.net/41nq3pt1/16/

当输入有内容时，我没有增加输入的padding-top，而是将高度从5rem 设置为4rem，并给它一个透明的border-top。这似乎适用于所有主要浏览器（在 IE 9、10、11、Edge 和当前的 Chrome、Firefox、Safari 中测试）。这是带有注释的重要代码块：

.input__input {
  width: 15rem;
  height: 5rem; // set a fixed height
  padding-left: 1rem; // removed padding-top
  font-size: 1rem;
  font-family: inherit;
  border: 0;
  outline: 1px solid #ccc;
}

.input--has-content .input__input {
  border-top: 1rem solid transparent; // replaced padding-top
  height: 4rem; // keep total height at 5rem
}

我仍然想知道为什么原始版本不能在 IE 10 中运行，但是 - 哦，好吧 - 我很高兴我找到了一个不太老套的修复程序。