IE11は、CSSの評価「遅い」回避する方法：無効と：有効な擬似セレクタを

Question

私が示したこの質問の意識だ：有効と：無効な擬似セレクタは、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と異なります。

ただし、フィールドを終了するか、次のフィールドに移動すると、IE11でもCSSが適用されていることがわかります。まるでそれが「1つ後ろ」であるかのように。

私は自分の実装でこの全く同じ問題に直面していますが、これは公開されていません。 IE11のこの奇妙な評価動作を回避するソリューション（non-JS）はありますか？

Answer 1

いいえ、彼らはEdgeで修正しているので、IE11ではそうではありません。

私は1つのことに注意しましたが、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>