Question

以下是我正在使用的登录表单的完整信息：https://jsfiddle.net/7z8q4pyd/

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

IE11和IE10使用非标准cols = int(np.ceil( (len(samples) - frameSize) / float(hopSize)) + 1)而不是标准:-ms-input-placeholder伪类。顺便说一下，MS Edge都不支持。

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

Answer 2

IE11不支持

CSS变量。请查看下面的链接，以获取针对浏览器的CSS变量的更具体支持。

enter link description here

因此，只需添加“ var”的后备广告即可。

Answer 3

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

为了修复它，我使用了javascript来模拟CSS的“占位符显示”功能

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

3 个答案: