css - 如何避免IE11 "slow"评估CSS :invalid and :valid pseudo selectors

Question

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

CSS form:valid selector doesn't work in IE11

还有这个 float 标签的例子:

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

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

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

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

Answer 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>