: 동적 내용을 추가 할 때 비어있는 가상 클래스

Question

나는 :empty 가상 클래스에 대해 sitepoint page과 quirksmode page을 읽었습니다.

Sitepoint는 동적 내용이 추가 된 경우에도 여전히 빈 스타일이 적용됩니다. 이런 식으로 행동하는 사람은 파이어 폭스였습니다.

Quirksmode는 요소 또는 텍스트로 채워질 때 빈 상태를 버립니다. 이 사이트의 데모는 내 브라우저에서 작동합니다 (chrome 19). 그래서 나는 파이어 폭스 만이 버그가 있다고 생각했다.

그러나 동적으로 항목 목록을 채우는 플러그인에이 코드 조각이 있습니다. 작동하지 않는 것 같습니다. here's a fiddle 버튼을 클릭해도 아이템이 추가되지 않습니다. 콘솔에서 디버그 할 때까지 표시됩니다 (요소 트리에서 <li>을 클릭하면 마술처럼 나타납니다).

왜 이런 일이 발생하고 빈 스타일을 강제로 삭제하겠습니까?

필자가 피들에서하고있는 일을 수행하는 다른 방법이 있다는 것을 알고 있지만 (현재 이러한 "다른 방법"중 하나를 수행하고 있습니다), 그러나 :empty 방법이 훨씬 쉽습니다.

UPDATE는 :

은 삭제 항목 버튼을 추가했습니다. 마지막 항목이 제거되면 목록이 사라지고 여전히 작동하지 않습니다. 흠 .. 나는 다른 브라우저에서 체크인을 시도 할 것이다. :empty display:none 및 사용에

FIX

임시 수정/대체 제로 width, height, borders, margins 및 paddings있는 요소를 가지고있다. 또한 position:absolute을 사용하여 흐름에서 제거합니다.

Answer 1

당신이 제공 한 바이올린은 나를 위해 FF10과 IE9에서 작동합니다. 그것은 단지 (18 세 이상)

아니 쿼크 모드 페이지뿐만 아니라 크롬에서 작동하기 때문에이, 왜 일어나는지 확인 .. 들어

설정하여 할-수 있도록 보인다을 강제 폐기 크롬 실패 코드를 사용하여 거의 모든 CSS 속성 ..

예를

확인 업데이트

http://jsfiddle.net/gaby/YprUV/9/에서, 난이 012,334,694 발견 인고정대로 표시되어 있지만, 아마도 우리가-oopen 다시한다 display:none

함께 사용했을 때 오작동 약 :empty 선택기 .. 여기서

은 단지 변경 display:none (사용하지 않는 시험이다 배경색) 그리고 잘 작동합니다. http://jsfiddle.net/YprUV/11/