html 공백 offset을 확인해봅시다 (익스플로러에서 보이지 않는 div)

스크립트 오류도 없는데 크롬에서만 보이고
익스플로러에서는 보이지 않는 div가 있다면
아래의 방법이 도움이 될 것 같습니다.

 

이상

• 불러오기 한 html의 내용이 이상없이 나와야 한다
• 크롬에서는 잘 구동되나 익스플로러에서는 증발

 

증상

• 크롬에서는 보이는데 익스플로러에서는 안보인다
• 스크립트 구문의 오류도 아니다. 함수는 잘 읽었다
• 외부 html 불러오기 문제도 없음을 체크했다.

 

진단

• offset 값을 확인해보니 left에 엄청나게 큰 값이 들어가있다. (1512.29)
• 즉 값이 커서 화면을 벗어나 있었다.
• css position : absolute 속성의 특징상 부모를 잘못 설정한 것으로 추정

 

해결

=> 결국은 css와  js의 일부를 변경

 

•  css : left값을 추가한다.

position: absolute;
left: 0;

 

• js : 동적으로 div를 조정해주는 부분에서 초기화하고 새로 부르는 함수를 추가 (.hide(), .show())

 

var count = 0; 
        $("#crossContent").click(function() { 
          count++;
          if (defaultShow.is(":visible")) {
            mul.hide();
            horizonShow.show();
            if (count % 2 == 1) {
              $("#cp2").after($("#cp1"));
            } else {
              $("#cp2").before($("#cp1"));
            }
          } else if (horizonShow.is(":visible")) {
            mul.hide();
            horizonShow.show();
            if (count % 2 == 1) {               
              actPn1.css("top", "50%");
              actPn2.css("top", "0%");
            } else {
              //먼저
              actPn1.css("top", "0%");
              actPn2.css("top", "50%");             
            }
          } else {
            alert("전환할 창이 없습니다.");
          }           
        });

 

 

* 참고하면 좋을 태그의 위치를 가져오는 함수 offset, position 둘의 차이점

https://cofs.tistory.com/197 [CofS]
http://www.devkuma.com/books/pages/226

 

* 참고하면 좋을 offset 값 (position) 좌표 알아내기

https://seohc.tistory.com/177