html - IE11 float 输入标签错误(占位符显示的问题？)

这是我正在使用的登录表单的完整信息：https://jsfiddle.net/7z8q4pyd/

一旦在输入字段中输入了一些文本，我正在处理的登录页面将在文本输入上方浮动一个标签，这在大多数浏览器中都适用，但似乎在IE11中不起作用。

我假设这与IE的“ placeholder-shown”兼容性问题有关，尤其是以下几行：

.form-label-group input:not(:placeholder-shown) {
  padding-top: calc(0.75rem + 0.75rem * 0.66);
  padding-bottom: calc(0.75rem / 3);
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: calc(0.75rem / 3);
  padding-bottom: calc(0.75rem / 3);
  font-size: 12px;
  color: #777;
}

我尝试将上面的代码更改为：

.form-label-group input:not(:focus) {
  padding-top: calc(0.75rem + 0.75rem * 0.66);
  padding-bottom: calc(0.75rem / 3);
}

.form-label-group input:not(:focus) ~ label {
  padding-top: calc(0.75rem / 3);
  padding-bottom: calc(0.75rem / 3);
  font-size: 12px;
  color: #777;
}

仍然不能正常工作。不太确定还可以做些什么才能使它在IE11上正常工作。

最佳答案

IE11和IE10使用非标准的:-ms-input-placeholder而不是标准的:placeholder-shown伪类。顺便说一下，MS Edge不支持。

Here's a related question with a cross-browser solution.