IE11浮动输入标签错误(占位符谱商问题?)

Question

我正在使用的登录页面将在输入字段中输入某些文本后，将在文本输入上方浮动标签，这在大多数浏览器中都很好，但它似乎在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都不支持。

这是一个与跨浏览器解决方案相关的问题。

Answer 2

css变量。检查下面的链接以提供对CSS变量的浏览器的更具体支持。

在此处输入链接说明

所以，只需添加" var"的后备，它将起作用。

Answer 3

该问题最终是CSS中的"占位符"。

为了修复它