왼쪽은 크롬 / 오른쪽은 익스플로러 버전11입니다.

저 4줄이 익스에서는 틀어지는데 왜그런지 알 수 있을까요....ㅠㅠ?

그리고 위에 남긴문의도 익스플로러버전11에서 일어나는 현상입니다!

@ 원인

default_pc.css 에서 z-index 설정이 잘못되었습니다.

1. 메인페이지인데.. 서브페이지의 container 에만 z-index 를 주도록 되어 있으며,

2. z-index 의 경우 position 값이 없으면 정상동작하지 않습니다.

그러나... position, z-index 를 정상적으로 설정하더라도, 유투브 iframe 의 경우 해당값과 상관없이 IE에서 오류가 발생합니다.

 

@ 해결

iframe 유투브 영상이 정상적으로 밑으로 숨겨지도록, 메인페이지 소스에 다음과 같이 추가하였습니다.

<iframe width="100%" height="350" src="https://www.youtube.com/embed/Vcc1rfbNOz0?wmode=transparent" frameborder="0" allowfullscreen></iframe>

[추가질문]

 

@ 문제점

박스1이 박스2보다 height 값이 더 크기 때문에...

float 의 특성에 따라서 박스3이 오른쪽 아래에 위치하게 됩니다.

 

@ 원인

박스1과 박스2 안의 원본이미지의 크기가 다른데...

크롬에서는 이미지가 축소되더라도 정수값으로 변환이 되어서 둘다 같은 값을 가지게 되나,

IE에서는 소숫점 아래까지 표현되어서, 이미지의 미묘한 높이 차이로 인해서 화면이 틀어지게 되었습니다.

 

@ 수정

1. 둘다 같은 크기의 이미지를 사용하는것이 제일 좋습니다.

or

2. 이미지와 상관없이 줄바꿈만 정상적으로 처리하려면, 세번째 LI 에 clear:both; 를 추가합니다.

- 해당방식으로 처리하면 높이차이에 따른 미묘한 화면 틀어짐은 계속 나타나게 됩니다.