如何避免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的评价：和无效的：有效的伪选择

回答

相关问题