집 >웹 프론트엔드 >H5 튜토리얼 >H5 및 C3와 호환되지 않는 이전 버전의 브라우저를 처리하는 방법

H5 및 C3와 호환되지 않는 이전 버전의 브라우저를 처리하는 방법

php中世界最好的语言원래의: 2018-01-09 10:25:214439검색

이번에는 이전 버전의 브라우저가 H5 및 C3와 호환되지 않는 문제를 해결하는 방법을 알려 드리겠습니다. 이전 버전의 브라우저에서 HTML5를 지원하도록 하는 방법은 무엇인가요? H5 및 C3와 호환되는 이전 버전의 브라우저에 대한 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 살펴보겠습니다.

HTML5는 우리를 위해 많은 일을 할 수 있습니다. 가장 맛있는 것은 의미론적 태그를 적용하는 것입니다. Chrome이나 HTML5를 지원하는 다른 브라우저에서 이 기능을 사용해 본 적이 있다면 이 문서가 확실히 유용할 것입니다. IE에서도 HTML5를 사용할 수 있습니다.

첫 번째 방법: Google의 html5shiv 패키지 사용(권장)

우선 아래 Google의 html5.js 파일을 인용해야 합니다. 이점에 대해서는 언급하지 않겠습니다.

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

위 코드를 헤드 섹션에 복사하세요. , 기억하세요. 헤드 부분이어야 합니다(IE는 구문 분석하기 전에 이 요소를 알아야 하기 때문에 이 js 파일은 다른 위치에서 호출될 수 없으며 그렇지 않으면 유효하지 않습니다)

가장 중요한 것은 이러한 html5 태그를 블록으로 만드는 것입니다. div처럼요. 자, 한 문장으로 간단하게 설명하겠습니다. html5.js를 인용하여 html5 태그를 블록으로 만듭니다

두 번째 방법: CodingJavaScript

<!--[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 태그로 바꾸도록 안내하는 Facebook의 접근 방식을 따를 수 있습니다. . 태그는 호환성을 유지하기 위해 많은 해킹을 작성하는 것보다 가볍습니다.

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

이는 사용자에게 스크립트를 열도록 안내하거나 HTML4 태그 디자인 인터페이스로 직접 이동할 수 있습니다.

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

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

OpacityTransparency

요소의 투명도는 IE의 필터를 사용하여 쉽게 얻을 수 있습니다.

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

여기 반투명 영역
opacity: .4;

filter:alpha(opacity=40);

border-radius/Box Shadow box Shadow/Text Shadow text Shadow

IE 언어에서 벡터 마크업을 사용할 수 있습니다( VML) 및 자바스크립트를 사용하여 이러한 효과를 얻으려면 IE-CSS3을 참조하세요. HTC 파일을 참조한 후 이 세 가지 CSS3 속성을 IE 브라우저에서 사용할 수 있습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!