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

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

enter link description here

因此，只需添加 "var" 的回退即可。

Answer 2

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

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

Answer 3

问题最终成为 "placeholder-shown" CSS。

为了修复它，我使用 javascript 来模拟 CSS 的 "placeholder-shown"

的功能

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

IE11 Floating Input Label Bug (placeholder-shown issue?)

html

css

floating

material-design

bootstrap-4