HTML5/CSS3 모달 호환성 IE와의 호환성

처음으로 HTML5/CSS3를 사용하고 있으며 내 페이지 중 하나에서 대화 (모달) 표시로 멋진 링크를 사용했습니다.HTML5/CSS3 모달 호환성 IE와의 호환성

이것은 Chrome/Firefox에서는 꿈이지만 IE에서는 그렇지 않습니다 (큰 놀라움이 아닐 수도 있음). IE에서

(9) 페이지가 실제로

는

는 사람이 정확히 무엇 CSS의 일부 것은 호환되지 않는 및 수정이있을 경우 가능한 점을 지적 할 수 .. 링크를 클릭하려고 완전히 때 정지?

코드는 아래에 있습니다. 미리 감사드립니다. 당신이 -ms-를 썼다 didnt한다 -O- 당신이 쓴 모든 태그

HTML

<td><a href="#Code1">Get Date/Without Time</a></td> 


<div id="Code1" class="modalDialog"> 

<div> 

<a href="#close" title="Close" class="close">X</a> 
<h2>TITLE</h2> 
<p>TEXT</p> 
     </div> 
     </div>

CSS

.modalDialog { 
     position: fixed; 
     font-family: "Trebuchet MS", Helvetica, sans-serif; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     overflow: auto; 
     background: rgba(0,0,0,0.8); 
     z-index: 99999; 
     opacity:0; 
     -webkit-transition: opacity 400ms ease-in; 
     -moz-transition: opacity 400ms ease-in; 
     transition: opacity 400ms ease-in; 
     pointer-events: none; 
    } 

    .modalDialog:target { 
     opacity:1; 
     pointer-events: auto; 
    } 

    .modalDialog > div { 
     width: 40%; 
     height: auto; 
     position: relative; 
     margin: 10% auto; 
     padding: 5px 20px 13px 20px; 
     border-radius: 10px; 
     background: #FFFFFF; 
     background: -moz-linear-gradient(#FFFFFF, #999999); 
     background: -webkit-linear-gradient(#FFFFFF, #999999); 
     background: -o-linear-gradient(#FFFFFF, #999999); 
    } 

    .close { 
     background: #285C82; 
     color: #FFFFFF; 
     line-height: 25px; 
     position: absolute; 
     right: -12px; 
     text-align: center; 
     top: -10px; 
     width: 24px; 
     text-decoration: none; 
     font-weight: bold; 
     -webkit-border-radius: 12px; 
     -moz-border-radius: 12px; 
     border-radius: 12px; 
     -moz-box-shadow: 1px 1px 3px #000; 
     -webkit-box-shadow: 1px 1px 3px #000; 
     box-shadow: 1px 1px 3px #000; 
    } 

    .close:hover { color: #285C82; background: #FFFFFF; }

출처

2012-11-27 William

IE9 does not support CSS pointer-events의 인터넷 익스플로러 지원을 볼 수 있습니다. 모든 브라우저에서 대화 상자는 보이지 않게 (불투명하게) 전체 페이지에 렌더링되지만 IE9에서는 포인터 이벤트가 이 아니기 때문에이 무시되므로 대화 상자가 앵커의 클릭 이벤트를 차단합니다.

이 문제를 해결할 수있는 더 쉬운 방법이 있지만 해결 방법은 conditional comments을 사용하는 IE의 경우 별도의 스타일 시트에 다음 속성을 추가하는 것입니다.

.modalDialog { 
    display:none; 
} 

.modalDialog:target { 
    display:block; 
}

다른 해결 방법은 <a> 위치 및 Z- 색인> 대화의 Z- 색인을 제공하기위한 것이다.

또한 IE9의 CSS transitionis not supported이므로 대안을 찾아야 할 수도 있습니다. 어쩌면 IE < 9 CSS3 Transition Effect Cheats?이 도움이 될 수 있습니다.

출처

2012-11-27 14:59:02 andyb

감사합니다. – William

IE10은 '포인터 이벤트'를 지원하지 않습니다! – andyb

은 -webkit-,은 또는이다 -moz-하는 Internet Explorer의 접두사. 모든 인터넷 익스플로러에서 전환 나던 작품은, 당신은 w3schools

보아스

출처

2012-11-27 14:51:18

HTML5/CSS3 모달 호환성 IE와의 호환성

답변

관련 문제