如何使用兄弟组合器：IE中有效的伪类？

Question

我在IE 10和11中偶然发现了一些奇怪的行为。相邻的兄弟CSS组合器工作正常。 （+）:valid和:invalid伪类有效。但是当你把它们放在一起时，它们会变得很奇怪。

拿这个html

<input required>
<p class="message">message</p>

使用此css设置

input:valid { border: solid green 1px; }
input:invalid { border: solid red 1px; }

input:valid + .message { background-color: green; }
input:invalid + .message { background-color: red; }

当输入中没有文字时，它正确地有一个红色边框。以下消息的颜色应始终匹配。但是，您必须执行页面缩放才能获得要同步的颜色。请注意，仅仅调整视口大小是不够的。这是一个错误吗？有解决方法吗？

Here's a demo.

Answer 1

正如BoltClock在其评论中所说，它是一个重绘的错误。

您可以通过将display css切换为none并返回block元素中的.message来强制重新绘制。

示例：

$('input').keyup(function () {
    $(this).siblings('.message').css('display','none').css('display', '');
});