Workaround for: trống Selector không được cập nhật Khi trẻ em được thêm vào trong IE11

Question

Tôi có tuyên bố css đơn giản tôi muốn áp dụng cho một số HTML về cơ bản chỉ hiển thị một phần tử khi anh chị em trước của nó không có sản phẩm nào. Trường hợp sử dụng là chỉ hiển thị nút "Xóa" khi danh sách có các mục trong đó.

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

ul:empty + button 
{ 
    display: none; 
} 

Vấn đề là khi javascript của tôi chèn mục danh sách mới vào danh sách, Chrome sẽ hoạt động chính xác và tự động hiển thị nút. IE11 tuy nhiên không hiển thị nút Clear. Câu chuyện JS này minh họa sự cố: http://jsfiddle.net/xw4nbnz3/

Cách giải quyết dễ nhất cho vấn đề này để thực hiện tác vụ ie11 là gì? Tốt nhất chỉ nên ở trong CSS.

Answer 1

Khá chắc chắn tôi đã thấy điều này trước đây, nhưng tôi không thể tìm thấy câu hỏi trước nữa vì vậy tôi sẽ có một đâm vào nó. Điều này trông giống như một lỗi repaint điển hình: IE sẽ hiểu CSS của bạn tốt ... nếu danh sách bắt đầu với các mục, và nếu bạn viết một chức năng để trống danh sách thay vào đó, nó sẽ không cập nhật các nút hoặc. Thật không may, repaint lỗi không được biết đến để có cách giải quyết CSS tinh khiết.

May mắn thay, chúng thường không cần đến chúng. Vì điều này chỉ xảy ra khi bạn thay đổi DOM, bạn có thể dễ dàng làm việc xung quanh điều này trong JS, và nó không có rất nhiều dòng. Có vẻ như loại bỏ các danh sách riêng của mình đầu tiên, trước khi chèn mục mới, sau đó đưa danh sách trở lại trong 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); 
} 

Thử nghiệm trên IE11 trên Windows 7, Windows 8.1 và Windows 10 RTM (xây dựng 10.240), và Microsoft Edge trên Windows 10 RTM. Lưu ý rằng việc xóa danh sách sau khi chèn mục (ngay trước khi đưa nó trở lại) không hoạt động; bạn sẽ cần phải loại bỏ nó trước.