在 IE11 中添加子项时未更新空选择器的解决方法

Workaround for :empty Selector Not Being Updated When Children Added in IE11

本文关键字：更新 选择器 方法 解决 IE11 添加      更新时间：2023-09-26

我有一个简单的css语句，我想应用于一些HTML，它基本上只在元素的前一个兄弟不为空时才显示元素。用例是仅在列表中包含项目时才显示"清除"按钮。

<ul></ul>
<button>Clear</button>
ul:empty + button
{
    display: none;
}

问题是，每当我的javascript将新的列表项插入列表中时，Chrome似乎都可以正常工作并自动使按钮可见。但是，IE11 无法显示"清除"按钮。这个JS小提琴说明了这个问题：http://jsfiddle.net/xw4nbnz3/

此问题使 ie11 工作的最简单解决方法是什么？最好只停留在CSS中。

很确定我以前见过这个，但我再也找不到上一个问题了，所以我会试一试。

这看起来像一个典型的重绘错误：IE会很好地理解你的CSS......如果列表以项目开头，并且如果您编写一个函数来清空列表，它也不会更新按钮。不幸的是，重绘错误并不以具有纯 CSS 解决方法而闻名。

幸运的是，他们通常不需要它们。由于这仅在更改 DOM 时发生，因此您可以在 JS 中轻松解决此问题，并且不需要很多行。看起来在插入新项目之前先删除列表本身，然后将列表放回去可以解决此问题，同时不会在其他浏览器中产生任何问题：

function AddListItem()
{
    var mylist = document.getElementById("mylist");
    if (!mylist)
        return;
    var parent = mylist.parentElement;
    var button = mylist.nextElementSibling;
    parent.removeChild(mylist);
    var li = document.createElement("li");
    li.appendChild(document.createTextNode("Hello, world!"));
    mylist.appendChild(li);
    parent.insertBefore(mylist, button);
}

在 Windows 7、Windows 8.1 和 Windows 10 RTM（内部版本 10240）上的 IE11 以及 Windows 10 RTM 上的 Microsoft Edge 上进行测试。请注意，在插入项目后（在将其放回之前）删除列表不起作用;您需要先将其删除。

该问题与

级联选择器（如选择器ul:empty + button中的button）有关。

在 IE11 中使用 :empty 伪类是安全的，当它应用于 DOM 元素本身时 https://codepen.io/egeneralov/pen/geRQXz。

相关文章：