如何避免 IE11 "slow" 评估 CSS :invalid 和 :valid 伪选择器

Question

我知道这个问题显示 :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 中也是如此。好像是"one behind"。

我在自己的实现中遇到了完全相同的问题，但 public 没有。是否有解决方案（非 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>

如何避免 IE11 "slow" 评估 CSS :invalid 和 :valid 伪选择器

How to avoid IE11 "slow" evaluation of CSS :invalid and :valid pseudo selectors

css

internet-explorer-11