javascript - 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>

初始状态:在输入字段的初始状态下，有一个绝对定位的标签位于输入的垂直中间。这是通过给它一个 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 中不起作用，但是 - 哦， - 我很高兴我找到了一个不太黑的修复程序。