2012-02-25 44 views
9

Tôi đã đọc trong số sitepoint pagequirksmode page này về kính giả :empty mới.: pseudoclass rỗng khi thêm nội dung động

Sitepoint cho biết rằng ngay cả khi có nội dung động được nối thêm, kiểu trống sẽ vẫn có hiệu lực. Điều đáng lưu ý là firefox là người cư xử theo cách này.

Quirksmode cho biết rằng nó loại bỏ trạng thái trống khi nó được điền bằng một số phần tử hoặc văn bản. bản trình diễn trên trang web này hoạt động trong trình duyệt của tôi (chrome 19). Vì vậy, tôi giả định chỉ firefox sẽ bị lỗi.

Tuy nhiên, tôi có đoạn mã này trong plugin của tôi, tự động điền danh sách với các mục, nó dường như không hoạt động, here's a fiddle nối thêm mục danh sách, ngay cả khi bạn nhấp vào nút, các mục sẽ không xuất hiện cho đến khi bạn cố gắng gỡ lỗi trong bảng điều khiển (chúng xuất hiện một cách kỳ diệu khi bạn nhấp vào <li> trong cây phần tử).

Tại sao điều này xảy ra và có công việc xung quanh để "loại bỏ" kiểu trống không?

Tôi biết có nhiều cách khác để làm những gì tôi đang làm trong fiddle (và hiện đang làm một trong những "cách khác"), nhưng phương pháp :empty dễ dàng hơn rất nhiều.

CẬP NHẬT:

thêm một nút mục remove. khi mục cuối cùng bị xóa, danh sách sẽ biến mất - vẫn không hoạt động. hmmm .. tôi sẽ cố gắng kiểm tra trong một trình duyệt khác.

FIX

tạm thời sửa chữa/thay thế cho sử dụng :emptydisplay:none là phải có nguyên tố này có zero width, height, borders, margins, và paddings. ngoài ra, position:absolute để xóa nó khỏi luồng.

+0

Tôi đã không đi qua ': trống 'cho đến bây giờ, và 1 cho một câu hỏi thú vị. –

+0

Vâng, chúng xuất hiện trong FX10. –

Trả lời

5

Fiddle bạn đã cung cấp cho tôi với FF10 và IE9. Nó chỉ thất bại trong Chrome (18+)

Không chắc lý do tại sao điều này xảy ra, như trang quirksmode làm việc trong Chrome cũng ..

Đối với lực loại bỏ nó có vẻ là không-thể bằng cách thiết lập hầu như bất cứ tài sản css với mã ..

dụ tại http://jsfiddle.net/gaby/YprUV/9/

cập nhật

Ok, tôi thấy 012.334.694 nàyđó là về :empty selector hỏng khi sử dụng với display:none

Nó được đánh dấu là cố định, nhưng có lẽ chúng ta nên tái oopen nó ..

Dưới đây là một thử nghiệm mà không sử dụng display:none (nó chỉ thay đổi màu nền) và nó hoạt động tốt .. http://jsfiddle.net/YprUV/11/

+0

vừa được thử nghiệm trong Opera 11.61 và IE9. có vẻ như đó là sự cố với Chrome. Tôi đã xem xét một cách rõ ràng 'display: block' để làm cho nó hoạt động. – Joseph

Các vấn đề liên quan