css - 如何将兄弟组合器与 :valid pseudoclass in 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; }

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

Here's a demo.

Answer 1

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

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

例子:

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