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

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

javascript jquery html css internet-explorer

Javascript IE 10不会在文本输入上重新应用填充,javascript,jquery,html,css,internet-explorer,Javascript,Jquery,Html,Css,Internet Explorer,我有一个关于文本输入和填充的IE10特定问题，这让我非常头痛。下面是对设置和正在发生的事情的文字描述，但这里还有一个运行示例：我省略了下面的CSS，因为它有点大，请看JSFIDLE。非常感谢您的帮助，我不仅在寻找解决方案，也在寻找解释IE10为何表现怪异描述这是我的输入元素的HTML结构： <div class="input"> <label class="input__label" for="input">Floating label</label&g

我有一个关于文本输入和填充的IE10特定问题，这让我非常头痛。下面是对设置和正在发生的事情的文字描述，但这里还有一个运行示例：

我省略了下面的CSS，因为它有点大，请看JSFIDLE。非常感谢您的帮助，我不仅在寻找解决方案，也在寻找解释IE10为何表现怪异

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

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

删除内容后：当发现输入为空时，将删除更改填充的类，并且输入应处于初始状态。现在，尽管可以在所有当前浏览器中工作，甚至可以在IE 8中工作（我没有测试旧版本），IE 10显然没有改变
输入
元素的填充返回，请参见以下屏幕截图：

复制步骤

单击输入字段，看到光标与标签在同一行上闪烁

键入一些内容，标签应该向上移动，光标稍微向下移动

通过单击backspace删除每个输入

标签再次向下移动，光标应在与步骤1相同的线上闪烁

谢谢你的帮助

多亏了，我对线条高度进行了一些试验，最终找到了一种解决方案，它不依赖线条高度，而是通过使用透明边框来解决问题

解决方案：

当输入有内容时，我没有增加输入的

填充顶部

，而是将高度从

5rem

设置为

4rem

，并给它一个透明的

边框顶部

。这似乎适用于所有主流浏览器（在IE9、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中不起作用，但是——哦，好吧——我很高兴我找到了一个不太粗糙的修复方法。

多亏了，我尝试了一点线条高度，最终找到了一个不依赖线条高度的解决方案，但通过使用透明边框解决了问题