[CSS] IE(인터넷 익스플로러)에서 position absolute가 작동되지 않을때

 

인터넷 익스플로러는 RIP 했지만

죽어서 구천을 떠도는 망령 짓을 여전히 하고 있다.

 

 

크롬, 파이어폭스, 사파리와 같은 여타의 브라우저에서

position absolute가 그대로 적용돼서 나왔지만

IE에서는 적용이 안될 때가 있다.

 

 

width와 height를 100% 가득으로 채워주고

top, bottom도 0으로 나올 수 있게 설정했다.

게다가 부모의 position 도 relative였다.

 

 

 

하지만 콘텐츠 이미지 크기가 좁쌀만 하게 나오고

transform의 rotate까지 줬더니 영역 밖을 벗어났다.

 

 

영어로 구글링을 하던 중

친절하게 한글로 알려준 블로그가 있었다.

 

 

부모 요소의 태그가 td인지 확인해야 한다.

td태그 (display:table-cell) 일 경우에는

일부 브라우저에서는

position : relative 속성을 무시한다.

 

 

따라서 div 태그 안에 div를 하나 더 추가해서

다른 부모 요소를 이용해야 한다.

<td>
  <div style="display: relative;">
    ...
  </div>
</td>

 

 

 

진짜 의문인 게

다른 콘텐츠 페이지에서는 display: table-cell인데도 불구하고

position:absolute가 잘 먹혔다.

 

 

 

위와 같은 방법을 사용할 수 있는 상황이라면 괜찮지만

내 경우에는 콘텐츠 자체가 망가져서

display 요소를  inline-block으로 바꾸고 line-height로 세로 중앙 정렬을 했다.

display의 flex요소를 쓰면 쉽게 쓸 수 있을 텐데

ie의 망령이 나를 괴롭히고 있다.

개자식

 

 

 

 

 

Reference (참조)

 

https://flymogi.tistory.com/72