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

원문: Fixing IE's Opacity Inheritance

Fixing IE's Opacity Inheritance

---

Internet Explorer 7, 8, 9에서 position이 static이 아닌 자식 요소는 부모 요소의 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과 관계없이 자식 엘리먼트의 position이 static이 아니면 버그가 일어납니다. IE 9에서만 자식 엘리먼트가 position이 absolute나 fixed이고, 부모 엘리먼트가 static일 때 문제가 발생한다.

해결 방법

• IE 9: 부모 요소에게 static이 아닌 position을 줍니다.
• IE 8: 자식 요소의 filter을 inherit으로 하여 부모 요소의 값을 상속하도록 합니다.
• IE 7: 자식 요소의 filter을 inherit으로 하여 부모 요소의 값을 상속하도록 하고, 부모 요소에게 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에서는 부모와 자식의 opacity나 filter를 둘 다 적용하므로 주의해야합니다. 위 예제는 IE9에서 25% 투명도(50%의 50%)를 가지고 있습니다. 자식의 알파필터를 셋팅할때에는 조건부 CSS로 IE 8 이하로 타겟팅해서 사용해야 합니다.