如何避免IE11「慢」 CSS的評價：和無效的：有效的僞選擇

我知道這個問題，表明的：有效，：無效的僞選擇不是在IE11的所有工作：如何避免IE11「慢」 CSS的評價：和無效的：有效的僞選擇

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。就好像它是「一個落後」。

我在我自己的實現中面對這個完全相同的問題，這是不公開的。是否有解決方案（非JS）來解決IE11的這種奇怪的評估行爲？

來源

2016-07-28 Ferdy

不，並且由於他們將其固定在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>

來源

2016-07-28 10:10:36 LGSon

感謝您對您的評論延伸。一個快速測試表明這是在IE11中工作，當我回到工作中（幾天後），將在我自己的實現中對此進行進一步測試，然後將您的答案標記爲已接受。 – Ferdy

如何避免IE11「慢」 CSS的評價：和無效的：有效的僞選擇

回答

相關問題