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

Question

我正在处理的登录页面会在输入字段中输入一些文本后在文本输入上方 float 一个标签，这在大多数浏览器中都很好用，但它似乎在 IE11 中不起作用。

我假设这与“占位符显示”的 IE 兼容性问题有关，尤其是这些行:

.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 上运行。

Answer 1

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

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