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

Question

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

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

我省略了下面的CSS，因为它有点大，请看JSFiddle。 非常感谢帮助，我不仅要寻找解决方案，还要解释为什么IE 10表现得很奇怪。

描述

这是我的input元素的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与其他浏览器之后的步骤4 。

重现步骤

1. 单击输入字段，看光标在与标签相同的行上闪烁
2. 输入内容，标签应向上移动，光标稍微向下移动
3. 点击退格键删除每个输入
4. 标签再次向下移动，光标应与步骤1中的同一行闪烁。

谢谢你的帮助！

Answer 1

感谢Marks的评论 ，我尝试了一些线高，并最终找到了一个不依赖于线高的解决方案，但通过使用透明边框解决了问题。

解决方案： 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中不起作用但是 - 哦 - 我很高兴我找到了一个不太苛刻的解决方案。