IE에서 absolute가 정상적으로 작동하지 않을 때

크롬에서는 디자인이 잘 나오는데, IE에서는 디자인이 이상하게 나오는 경우가 있었다.

자식 속성에 absolute로 되어있고, top, bottom을 0으로 줬는데 높이가 꽉 차지 않는 버그였다.

바로 위 부모에는 relative로 잘 적용되어있었고, 원인을 알 수가 없었다.

 

의심가는 것들을 모두 검색하다 발견...

 

혹시 부모 relative의 태그가 <td>가 아닌지 확인하라.

 

td태그(display: table-cell)의 경우 일부 브라우저에서 position: relative  속성을 무시한다.

와우..

놀랍게도 ie는 td에 relative 속성이 적용된다.

즉, IE가 버그인줄 알았건만 크롬이 버그였더라.

 

모두 동일하게 표시를 하려면

<td> 아래 <div>를 추가하여 <div> 태그에 relative 속성을 주도록 하자.

 

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