IE9에서 레이아웃 문제가 발생하는 CSS 불투명도

IE9에서 매우 흥미로운 문제가 발생했습니다. 래핑 div에서 필터 : 알파 (opacity =) 또는 -ms-filter CSS 속성을 사용하면 내부 블록 요소의 상자 모델이 손상됩니다. 즉, 수직 마진의 붕괴가 불가능 해지고 대신 수직 마진이 추가됩니다. 나는 IE9에서만이 문제에 직면 해있다. IE7/8은 영향을받지 않습니다.IE9에서 레이아웃 문제가 발생하는 CSS 불투명도

여기에 jsFiddle의 문제가 있습니다. 트리거 앵커를 사용하여 래핑 div에 필터 : 알파를 포함하는 클래스를 활성화합니다. (IE9에만 해당)

왜 그런가? 사전

에서

덕분에

출처

2012-09-17 travisbotello

모든 필터가 이것을 수행하는 것으로 보입니다 (http://jsfiddle.net/7BFd7/). 그러나 CSS 속성 인 '불투명도'는 IE9에서 작동하며 결함이 발생하지 않습니다. 따라서'[if lt IE 9]'주석 스타일에서만 필터를 사용하면 문제가 해결 될 수 있습니다. – Roman

빠른 답장을 보내 주셔서 감사합니다. 모든 프로젝트에서 상용구를 사용하고 있기 때문에 이미 생각했습니다. 그러나이 행동은 참으로 이상한 것입니다. – travisbotello

@Roman 아마도 답변으로 게시하여 받아 들일 수 있습니다. – Shauna

모든 필터는이 (jsfiddle.net/7BFd7)를 할 것으로 보인다.

나는 왜 그렇게하는지에 대해서 가설을 세울 수있었습니다. 필터를 사용하는 것처럼 요소를 설정하여 여백 축소를 수행하지 않는 알 수없는 표시 또는 위치 모드 (위치 절대, 인라인 블록 및 플로팅 또는 삭제 된 요소와 같은)를 사용하는 것 같습니다.

어쨌든 .. 그 요소를 숨기려면 과 동일한 효과를 가지며 모든 곳에서 지원되는 visibility: hidden을 사용할 수 있습니다.

불투명도를 애니메이트하려면 IE9에서 조건부 주석 또는 Normalizr을 통해 브라우저 스니핑을하고 opacity을 애니메이션화하고 이전 IE 버전에서 필터를 적용해야합니다.

출처

2012-09-18 08:27:57 Roman

한 가지 방법은 "해제"단지 CSS와 IE9의 파일러는 IE8에 적용 할 수 있도록하는 동안 낮은는 다음과 같은 경우에만 IE9를 대상으로 할 코드입니다, 당신은거야 이런 식으로

.css-selector { 
    filter:value; 
    opacity:value; 
} 
@media all and (min-width:0) { /* the min-width query hides below IE9 */ 
    .css-selector { 
     filter:none; 
    } 
}

opacity : value 만 사용하고 IE9에서 해당 요소를 필터링하지 않습니다.

출처

2014-04-01 23:14:40 squareman

IE9에서 레이아웃 문제가 발생하는 CSS 불투명도

답변

관련 문제