HTML5 및 CSS3와 이전 브라우저의 호환성 문제에 대한 자세한 설명

다음 편집자는 HTML5 및 CSS3와 이전 브라우저의 호환성 문제에 대한 기사를 가져올 것입니다. 에디터가 꽤 좋다고 생각해서 지금 공유해서 참고용으로 올려보겠습니다. 편집기를 따라 살펴보겠습니다

1. 기존 브라우저에서 HTML5를 지원하도록 합니다

HTML5는 우리에게 많은 일을 할 수 있지만 가장 맛있는 것은 의미론입니다. 태그 중 이미 Chrome이나 HTML5를 지원하는 다른 브라우저에서 태그를 사용했다면 이 문서가 도움이 될 것입니다. 이제 IE에서도 HTML5를 사용할 수 있기 때문입니다.
첫 번째 방법: Google의 html5shiv 패키지 사용(권장)

우선 Google에서 제공하는 다음 html5.js 파일을 인용해야 합니다. 이점은 언급되지 않습니다.

<!--[if IE]>   
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> 
< ![endif]-->

• 
  

위 코드를 head 섹션에 복사하세요. head 섹션이어야 한다는 점을 기억하세요. (IE에서는 이 요소를 요소 구문 분석 전에 알아야 하므로 이 js 파일을 다른 위치에서 호출할 수 없습니다. 그렇지 않으면 유효하지 않습니다.)

주로 이러한 html5 태그를 p와 같은 블록으로 만듭니다. 간단하게 한 문장으로 요약해 보겠습니다. html5.js를 인용하여 html5 태그를 블록화합니다.

두 번째 방법: JavaScript 코딩

<!--[if lt IE9]>    
<script>    
   (function() {   
     if (!    
     /*@cc_on!@*/
     0) return;   
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, 
     footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(&#39;, &#39;);   
     var i= e.length;   
     while (i--){   
         document.createElement(e[i])   
     }    
})()    
</script>   
<![endif]-->

• 
  

단, 위의 어떤 방법을 사용해도 새 태그의 CSS를 초기화해야 합니다. HTML5는 인라인 요소의 경우 기본적으로 작동하므로 이러한 요소를 배치하려면 CSS를 사용하여 수동으로 쉬운 레이아웃을 위해 블록 요소로 변환해야 합니다

/*html5*/   
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

• 
  

그러나 ie6/7/8 사용자가 스크립트를 비활성화하면 스타일이 지정되지 않은 "화이트보드" 웹 페이지가 됩니다. ?

사용자에게 noscript 로고가 있는 “/?_fb_noscript=1” 페이지를 입력하고 html5 태그를 html4 태그를 유지하는 것보다 낫습니다. 호환성을 위해 많은 해킹을 작성하는 것이 더 쉽습니다.

<!--[if lte IE 8]>
<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <p class="ie-noscript-warning">您的浏览器禁用了脚本，请<a href="">查看这里</a>来启用脚本!或者<a href="/?noscript=1">继续访问</a>.   
     </p>
</noscript>
<![endif]-->

• 
  

이것은 사용자가 스크립트를 열도록 안내할 수 있습니다. 또는 직접 HTML4 태그 디자인 인터페이스로 이동합니다.

2. 오래된 브라우저를 CSS3와 호환되게 만듭니다(불완전한 호환성 솔루션)

Internet Explorer 8부터 IE 시리즈는 CSS3를 지원하지 않습니다. 둥근 모서리, 그림자 등 IE에서 일반적으로 사용되는 효과를 만들려면 중복되고 의미 없는 요소와 그림을 사용하여 이러한 효과를 만들어야 합니다. 이러한 문제에 지친 후에 저는 이러한 문제를 해결하기 위해 보다 간결하고 직접적이며 효과적인 CSS3 스타일 방법을 사용하는 것에 대해 생각했습니다. 다행스럽게도 많은 비판을 받고 있는 Internet Explorer조차도 그 자체로 충분히 강력합니다. IE의 고유한 기술은 일부 CSS3 효과를 매우 효과적으로 구현할 수 있습니다.

불투명도 투명도

IE의 필터를 사용하면 요소의 투명도를 쉽게 얻을 수 있습니다. IE VML(벡터 마크업 언어)의

background-color:green;   
opacity: .4;   
filter:progid:DXImageTransform.Microsoft.alpha(opacity=40);

여기 반투명 영역

opacity: .4;
filter:alpha(opacity=40);

border-radius/Box Shadow/Text Shadow

및 javascript를 사용하면 이러한 효과를 얻을 수 있습니다. HTC 파일을 참조한 후 IE 브라우저에서 이 세 가지 CSS3 속성 을 사용할 수 있습니다.

CSS 코드클립보드에 콘텐츠 복사

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 、Chrome */
border-radius: 15px; /* Opera 10.5+, IE6+ 使用 IE-CSS3*/
-moz-box-shadow: 5px 5px 5px #000; /* Firefox */
-webkit-box-shadow: 5px 5px 5px #000; /* Safari、Chrome */
box-shadow: 5px 5px 50px #000; /* Opera 10.5+，IE6+ 使用 IE-CSS3 */
behavior: url(ie-css3.htc); /*引用ie-css3.htc */

사실 IE에는 섀도우와

를 구현하는 자체 필터가 있습니다. 드롭 섀도우 효과의 그림자는 연속적인 그라데이션 그림자를 생성합니다

filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=145, Strength=10);

드롭 섀도우로 생성된 그림자에는 밝고 어두운 변화가 없습니다

filter:progid:DXImageTransform.Microsoft.DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1");

필터가 기존 htc 스크립트와 충돌하는 것 같거나 기능이라고 부를 수 있습니다. 두 요소가 동시에 요소에서 활성화되면 필터 효과가 하위 요소로 전송됩니다

위 내용은 HTML5 및 CSS3와 이전 브라우저의 호환성 문제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!