ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [번역] 인터넷 익스플로러의 opacity 상속 문제 해결하기
    웹 프론트엔드/번역글 2018.01.24 16:56

    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 이하로 타겟팅해서 사용해야 합니다.

    Fixing IE's Opacity Inheritance를 번역했습니다. 유사한 이슈가 있어서 참고했습니다.

    댓글 0

Designed by Tistory.