IE11浮动输入标签错误(占位符显示的问题？)

Question

我正在处理的一个登录页面会在输入字段中输入一些文本时在文本输入上方浮动一个标签，这在大多数浏览器中都很有效，但在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上工作。

Answer 1

这个问题最终在CSS中被“占位符显示”。

为了解决这个问题，我使用javascript来模拟CSS的"placeholder-shown“功能。

Answer 2

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

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

Answer 3

IE11不支持CSS变量。查看下面的链接，了解针对CSS变量的浏览器的更多具体支持。

enter link description here

因此，只需添加"var“的回退，它就会起作用。