解决方法:在IE11中添加子项时,不会更新空选择器

Question

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

<ul></ul>
<button>Clear</button>

ul:empty + button
{
    display: none;
}

问题是,只要我的javascript在列表中插入新的列表项,Chrome就会正常工作并自动使按钮可见.但IE11无法显示"清除"按钮.这个JS小提琴说明了这个问题:http://jsfiddle.net/xw4nbnz3/

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

Answer 1

很确定我以前见过这个,但是我再也找不到上一个问题,所以我会捅它.

这看起来像一个典型的重绘bug:IE会理解你的CSS就好......如果列表以项目开头,如果你编写一个函数来清空列表,它也不会更新按钮.不幸的是,重复的bug并不知道有纯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.请注意,移除该列表后插入的项目不工作(右装回去之前); 你需要先删除它.