如何避免 IE11 对 CSS 的“慢”评估：invalid 和 :valid 伪选择器

【问题标题】：How to avoid IE11 "slow" evaluation of CSS :invalid and :valid pseudo selectors如何避免 IE11 对 CSS 的“慢”评估：invalid 和 :valid 伪选择器
【发布时间】：2016-07-28 08:54:04
【问题描述】：

我知道这个问题显示 :valid 和 :invalid 伪选择器在 IE11 中根本不起作用：

CSS form:valid selector doesn't work in IE11

还有这个浮动标签的例子：

https://snook.ca/archives/html_and_css/floated-label-pattern-css

在这里，IE11 的行为有所不同。起初，它似乎不起作用。您在表单的字段中输入应该应用的 CSS，而不是，这与 Chrome 和 Firefox 不同。

但是，当您退出该字段或移至下一个字段时，您确实会看到应用了 CSS，即使在 IE11 中也是如此。好像是“落后”一样。

我在自己的实现中遇到了同样的问题，这不是公开的。是否有解决方案（非 JS）来解决 IE11 的这种奇怪的评估行为？

【问题讨论】：

标签： css internet-explorer-11

【解决方案1】：

不，因为他们在 Edge 中修复了它，所以不太可能在 IE11 中修复它。

我确实注意到一件事，不过 CSS 更改对输入本身起作用，那么如果你这样做呢？

.field, .field label {
  position: relative;
  font-weight: bold;
  display: inline-block;
  font-family: arial;
  font-size: 10px;
}
input {
  position: absolute;
  top: 0;
  border: 1px solid #999;
  padding: 3px 2px;
  transition: top 0.5s;
}
input:focus {
  outline: none;
}

form:valid,
input:valid {
  top: 18px;
  transition: top 0.5s;
}

<form>
  <div class="field">
    <label>First Name</label>
    <div>
      <input type="text" pattern=".+" required="" placeholder="First Name">
    </div>
  </div>
</form>

【讨论】：

感谢您扩展您的评论。快速测试表明这在 IE11 中有效，当我回来工作时（几天后）将在我自己的实现中进一步测试它，然后将您的答案标记为已接受。