css 카운터가 숨겨진 콘텐츠 용 Internet Explorer에서 작동하지 않습니다 - 해결 방법은 무엇입니까?

Question

우리는 어떤 번호 목록을 원하고 당신에서 사용할 수있는이 멋진 카운터 것은 브라우저가 당신을 위해 숫자를 계산하도록 CSS 발견

ol.instructions {counter-reset:instructions-section;} 
ol.instructions > li:before { 
    content:counter(instructions-section); 
    counter-increment:instructions-section; 
} 

우리가하고있는 HTML이 명령 세트에 포함 된 페이지를, 각 세트는 번호 1,2,3 등. 한 번에 하나의 세트 만 표시되며 다른 세트를 숨기고 표시하는 헤더를 클릭하면 표시됩니다.

그것은 대접처럼 일했으며 우리는 Internet Explorer 8에서 테스트 할 때까지 미소 짓고 앉아있었습니다. Microsoft Internet Explorer 8에서는 Microsoft 스타일의 장엄한 서사가있었습니다. 클릭하여 세트를 불러 오면 모든 숫자는 0입니다.

나는 봤는데 주위에 발견 this page - 꽤 잘 (그것은 숨겨진 콘텐츠에 사용되는 호버와 CSS 카운터 논리를 사용하여) 문제를 설명하지만 만족스럽지 않은 해결책을 제공합니다 - 나는되고 싶습니다. CSS 카운터를 계속 사용하고 ie8 특정 해킹을 구현하여 어떻게 든 페이지를 숫자로 업데이트 할 수 있습니다. 나는이 문제에 관해 인터넷에서 다른 것들을 찾는 데 어려움을 겪고있다.

번호가 매겨진 목록을 포함하는 div에 마우스 포인터를 놓을 때까지 내 특정 페이지에 0이 표시됩니다. 숫자가 마술처럼 수정 될 것입니다. 마우스가 요소 위에서 마우스를 가리키고 있다고 생각하도록 페이지를 "움직이게"할 수있는 방법이 있습니까? 아니면 더 적절한 해결책이 있습니까?

Answer 1

하면, 제안되는 한, "숨겨진는"그럼 당신은 CSS의 조각으로 화면을 떨어져 이동 대신하여 내용을 "숨어"시도 할 수있는 문제를 일으키는 :

.hide { 
    position:absolute; 
    left: -1000px; 
} 

내가 사용했습니다 여기에 가능한 해결책을 보여주기 위해 문서에 링크 된 코드 예제 : http://codepen.io/akademy/pen/LDhGl

Answer 2

Ive도 같은 문제가있었습니다. 필자는 자바 스크립트를 사용하여 패딩의 CSS 인 인라인 CSS (left padding)를 적용하여이 문제를 해결할 수있었습니다 (왼쪽 패딩은 없었습니다). 이것은 IE가 요소를 다시 그리는 것으로 보인다.