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

Question

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

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

ul:empty + button
{
    display: none;
}

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

使 ie11 正常工作的最简单解决方法是什么？最好只住在CSS。

Answer 1

很确定我以前见过这个，但是我找不到之前的问题了，所以我会尝试一下。

这看起来像是一个典型的重绘错误：IE 会很好地理解您的 CSS...如果列表以项目开头，并且如果您编写一个函数来清空列表，它就不会更新按钮。不幸的是，重绘错误并不以具有纯粹的 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

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

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

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

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

html

javascript

css

internet-explorer

internet-explorer-11