問(wèn)題描述

默認(rèn)情況下隱藏所有項(xiàng)目的列表，第一個(gè) li 具有 block 的 display.問(wèn)題是如果第一個(gè)元素被刪除，這將不會(huì)更新，實(shí)際上是創(chuàng)建一個(gè)應(yīng)該顯示的新的第一個(gè)子元素.在 Safari 中，不顯示應(yīng)該顯示的新 li.

With a list of items where all are hidden by default, the first li has a display of block. The problem is that this won't update if the first element is removed, de facto making a new first-child which should be displayed. In Safari the new li that should show is not displayed.

HTML

<ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>
<button>click me </button>

CSS

.list .item { display: none } 
.list .item:first-child { display:block}

JS

$('button').on('click', function(e) {
  $('ul li:first').remove().appendTo($('ul'));
});

查看小提琴:http://jsfiddle.net/BFTan/1/

在所有其他瀏覽器中單擊該按鈕將循環(huán)瀏覽項(xiàng)目，但在 Safari 中沒(méi)有任何更新.

In all other browsers clicking the button will cycle through the items but in Safari nothing updates.

推薦答案

這似乎是 display: none 和從文檔樹中刪除的對(duì)象的問(wèn)題，當(dāng)您使用 :first-child，而不是 Safari 處理 :first-child 選擇器本身的問(wèn)題.

This appears to be a problem with display: none and objects removed from the document tree which manifests itself when you use :first-child, rather than a problem intrinsic to Safari's handling of the :first-child selector itself.

無(wú)論如何，這絕對(duì)是一個(gè)錯(cuò)誤.即使您將對(duì)象(及其內(nèi)容)與其父級(jí)分離，jQuery 也不會(huì)破壞該對(duì)象，但是當(dāng)從其父級(jí)分離一個(gè)元素時(shí)，無(wú)論 n 的值如何，它都不應(yīng)再是其父級(jí)的第 n 個(gè)子級(jí)，因此下一個(gè)元素成為第一個(gè)孩子的應(yīng)該相應(yīng)地匹配 :first-child.

Either way, this is definitely a bug. jQuery doesn't destroy the object even when you detach it (and its contents) from its parent, but when detaching an element from its parent it should no longer be the nth child of its parent for whatever value of n, so the next element that becomes the first child should match :first-child accordingly.

如果您將代碼中的 :first-child 更改為 :not(:last-child)，例如 this，這樣您就有兩個(gè)元素同時(shí)顯示，當(dāng)您單擊按鈕時(shí)，您會(huì)在 Safari 中注意到第一個(gè)元素消失，留下第二個(gè)元素完好無(wú)損(以及仍然隱藏的第三個(gè)).

If you change :first-child in your code to :not(:last-child), like this, such that you have two elements displaying at a time, you'll notice in Safari when you click the button the first element disappears, leaving the second element intact (as well as the third which is still hidden).

我還發(fā)現(xiàn)，如果您在列表本身上使用 :empty 選擇器添加新的空規(guī)則:

I also found that if you add a new empty rule with the :empty selector on the list itself:

/* Or even .list:empty even though it's not actually empty */
.list:not(:empty) {}

一切都會(huì)突然在 Safari 中正常工作.更奇怪的是，這種解決方法不適用于任何其他 3 級(jí)偽類.它僅適用于 :empty 或 :not(:empty).

Everything will suddenly work correctly in Safari. Even more bizarre is that this workaround does not work with any other level 3 pseudo-class. It only works with :empty or :not(:empty).

這篇關(guān)于Safari 錯(cuò)誤:當(dāng)使用 JS 刪除項(xiàng)目時(shí)，first-child 不更新 display:block的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！