IE8의 불투명도 문제

IE8에 나타나는 문제를 해결하려고합니다. 내가 가진 "#source"요소 (사용하여 jQuery를) 불투명도를 설정할 때IE8의 불투명도 문제

<div id="overlay"> 
</div> 
<div id="imgcontainer"> 
    <div> 
     <div id="source"> 
     </div> 
     </div> 
</div>

이 "0"IE에서 나는 #overlay의 배경을 볼 수 없습니다 #imgcontainer> DIV,하지만 왜 : HTML은 매우 간단합니다? 자바 스크립트 코드가있다 :

$(function(){ 
    $("#source").css({ 
     opacity: "0", 
    }); 
    $("#overlay").css({ 
     width: $(window).width(), 
     height: $(window).height(), 
     display: "block", 
     opacity: "0.6" 
    }); 

    $("#imgcontainer").css({ 
     zIndex: 2, 
     position: "fixed", 
     opacity: "1", 
     left: "0", 
     right: "0", 
     top: "100px", 
     display: "block" 
    }); 
});

당신은 jsFiddle에서 라이브 예를 시도 할 수는.
UPD :
몇 가지 실험을 한 후에 해결책을 찾았습니다. 그것은 정말로 html \ css 문제입니다. 그래서 코드를 리팩토링하고 jQuery 태그를 제거했습니다.

<body> 
     <div id="d1"> 
      <div id="d2"> 
       <div id="d3"> 
       </div> 
      </div> 
     </div> 
</body>

및 CSS 스타일 : 우리가 암흑 같은 HTML이 상상하는 모든, 우리는 #d3가 투명하게하는 것이 좋아 기대되는 첫번째보기에

body { 
    background-color: #c8c8c8; 
} 

#d1 { 
    background-color: #6c0922; 
    width: 500px; 
    border: 1px solid black; 
    filter: alpha(opacity = 100); 
} 

#d2 { 
    background-color: #146122; 
    width: 350px; 
    margin: 20px auto; 
    border: 1px solid black; 
} 

#d3 { 
    background-color: #0080c0; 
    height: 100px; 
    margin: 10px 65px; 
    filter: alpha(opacity = 0); 
    zoom: 1; 
}

을 우리가 볼 수 #d2 배경 (짙은 녹색) . IE7에서는 그렇게 간단하지 않습니다. \ 8. IE에서 우리는 몸 (회색) 배경이 #d2과 #d1을 통해 볼 수 있습니다. #d1의 모든 마법은 당신이 짐작했습니다. filter: alpha(opacity = 100);을 제거하면 올바르게 작동합니다.

당신은 물어볼 수 있습니다.하지만 불투명 한 요소에 불투명도 = 1을 설정하는 이유는 무엇입니까? 나는 모른다 :. 어떤 이유로이 동작을 사용해야 할 수도 있습니다. 매우 흥미롭고 예기치 않은 행동.

jsFiddle에서이 예제로 재생할 수 있습니다.

출처

2011-01-06 Kai

어떤 jQuery 버전을 사용하고 있습니까? –

jQuery라는 CSS/HTML 문제가 더 많이 발생합니다. 모든 jQuery를 제거하고 순수한 CSS로 만들면 문제가 지속될 것입니다. 그런 일이 생기지 않았다면, 이것의 원인과 해결책을 발견하는 것이 흥미로울 것입니다. – Dan

@Kees : 1.4.4 버전을 사용합니다 – Kai

IE8은 CSS 속성 opacity을 지원하지 않습니다 당신은 대신 MS 필터를 사용해야합니다 :

opacity: "0", 
    filter: alpha(opacity = 50); /*change value to suit your needs*/

모든하지만 아니에요. 이것은 요소가 배치되었을 때만 작동합니다. 고맙게도 이미 요소가 있으므로 작동합니다. 나중에 참조 할 위치 세트가없는 경우 zoom: 1을 선택기에 추가하면 IE에서 작동합니다.

출처

2011-01-06 13:21:34 Kyle

IE6/7에는'filter'가 필요하고 IE8에는'-ms-filter'가 필요할 수도 있습니다. IE9는'opacity'를 지원합니다. 모든 브라우저에서 작동하려면'filter' 이외에'opacity'를 지정해야합니다. – Spudley

브라우저가 IE 인 경우 jquery는 'opacity'키를 처리합니다 (jquery에서 설정 한 경우 'filter : ...'매개 변수가됩니다). 그러나 내가 틀렸다면 나를 바로 잡습니다. –

이것은 사실이 아니며 jQuery를 사용하여 CSS를 변경하고 있습니다.jQuery는 자동으로 브라우저 간 호환성을 처리합니다. 주의 깊게 보면,'div's는 IE에서 투명하지만'div # source'의 경우 부모가되고 심지어는 교차하는 곳, 또한 투명하다. 이것은 문제가있는 곳이다 – Dan

동일한 문제가있었습니다. 검색 및 독서를 많이했고 IE8이 다른 브라우저에서 사용하는 불투명도에 대한 CSS를 사용하지 않는다는 것을 알았습니다.

#loading-div-background { 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    background:gray; 
    width:100%; 
    height:100%; 
    /* Next 2 lines IE8 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); 
}

그러나, 여전히 위치에 작동하지 않았다 : : 여기 IE8에 사용되는 내 CSS입니다 고정은,하지만 난 위치에 넣어 한 번 : 절대이 일하기 시작했다.

출처

2013-02-15 18:52:28

작동 - 내 월요일을 저장했습니다. – william

얼마나 많은 시간을 절약 할 수 있었습니까? 나를 다른 사람들을 도와주고 싶다! :-) –

IE8의 불투명도 문제

답변

관련 문제