본문 바로가기

웹 프론트엔드/잡다한 이슈

[번역] 인터넷 익스플로러의 opacity 상속 문제 해결하기

원문: Fixing IE's Opacity Inheritance

 

Fixing IE's Opacity Inheritance

Fixing IE's Opacity Inheritance Child elements ignore the parent's opacity in Internet Explorer. January 17, 2012 In Internet Explorer 7, 8, 9, non-static child elements do not inherit the opacity of the parent. All of this text should have a 50% opacity..

www.jacklmoore.com


Internet Explorer 7, 8, 9에서 positionstatic이 아닌 자식 요소는 부모 요소의 opacity를 상속받지 않습니다.

<div style='opacity: 0.5; filter: alpha(opacity=50);'>
  이 모든 텍스트는 50% opacity를 가져야 한다...
  <div style='position: relative'>하지만 이 줄은 IE 7, IE 8에서 100% opacity로 보인다.</div>
  <div style='position: absolute'>그리고 이 줄은 IE 7, IE 8, IE 9에서 100% opacity로 보인다.</div>
</div>

부모 엘리먼트에 position과 관계없이 자식 엘리먼트의 positionstatic이 아니면 버그가 일어납니다. IE 9에서만 자식 엘리먼트가 positionabsolutefixed이고, 부모 엘리먼트가 static일 때 문제가 발생한다.

해결 방법

  • IE 9: 부모 요소에게 static이 아닌 position을 줍니다.
  • IE 8: 자식 요소의 filterinherit으로 하여 부모 요소의 값을 상속하도록 합니다.
  • IE 7: 자식 요소의 filterinherit으로 하여 부모 요소의 값을 상속하도록 하고, 부모 요소에게 static이 아닌 position을 줍니다.
<div style='opacity: 0.5; filter: alpha(opacity=50); position: relative;'>
    이 모든 텍스트는 50% opacity를 갖는다...
    <div style='position: relative; filter: inherit;'>이 줄이랑</div>
    <div style='position: absolute; filter: inherit;'>이 줄도 포함해서</div>
</div>

부모로부터 상속받는 것이 바람직하지 않은 경우에는, 자식 엘리먼트에게 새로운 알파 필터를 추가하여 해결할 수도 있습니다.

<div style='opacity: 0.5; filter: alpha(opacity=50); position: relative'>
    이 모든 텍스트는 50% opacity를 갖는다...
    <div style='position: relative; filter: alpha(opacity=50);'>이 줄이랑</div>
    <div style='position: absolute; filter: alpha(opacity=50);'>이 줄도 포함해서</div>
</div>

자식 요소에 filter를 준 경우에는 IE 9에서는 부모와 자식의 opacityfilter를 둘 다 적용하므로 주의해야합니다. 위 예제는 IE9에서 25% 투명도(50%의 50%)를 가지고 있습니다. 자식의 알파필터를 셋팅할때에는 조건부 CSS로 IE 8 이하로 타겟팅해서 사용해야 합니다.