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

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

这看起来像是一个典型的重绘错误：IE会理解你的CSS就好......如果列表以项目开头，如果你编写一个函数来清空列表，它也不会更新按钮。不幸的是，重新制作的bug并不知道有纯CSS的解决方法。

幸运的是，他们通常不需要它们。因为只有在更改DOM时才会发生这种情况，因此您可以在JS中轻松解决这个问题，并且不需要很多行。在插入新项目之前，首先删除列表本身，然后将列表放回resolves this issue whilst not creating any problems in other browsers：

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。请注意，在插入项目之后删除列表（在重新放入之前）不起作用;你需要先删除它。

Answer 2

此问题与级联选择器有关，例如选择器button中的ul:empty + button。

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

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

2 个答案: