描述

Question

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

我省略了下面的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中的同一行闪烁。

感谢您的帮助！

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

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

描述

重现步骤

1 个答案: