Html IE11浮动输入标签错误（占位符显示问题？）

这是我正在处理的登录表单的完整来源：

我正在处理的登录页面将在输入字段中输入一些文本后在文本输入上方浮动一个标签，这在大多数浏览器中都非常有效，但在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上实现这一点。

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

---

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

IE11和IE10使用非标准的

：-ms输入占位符，而不是标准的
：显示的占位符
伪类。顺便说一句，MS Edge两者都不支持

问题最终在CSS中显示为“占位符”

为了解决这个问题，我使用javascript来模拟CSS的“占位符显示”功能。
IE确实不支持CSS变量，但这不是问题所在。即使删除了CSS变量，浮动标签仍然不能在IE中正常工作（我已经将JSFIDLE链接更新为一个没有CSS变量的新链接）。正如我在问题中所说的，我99%确信这个问题与“显示的占位符”有关