집 >웹 프론트엔드 >HTML 튜토리얼 >HTML5 및 CSS3의 브라우저 호환성 문제

HTML5 및 CSS3의 브라우저 호환성 문제

php中世界最好的语言원래의: 2017-12-02 13:45:232320검색

HTML5와 CSS3는 매우 사용하기 쉽고 강력한 새 속성입니다. 유일한 주요 결함은 많은 오래된 브라우저가 호환되지 않을 수 있다는 것입니다. 오늘은 HTML5 및 CSS3과의 오래된 브라우저 호환성 문제를 여러분과 공유하겠습니다.

1. 오래된 브라우저에서 HTML5를 지원하도록 하세요

HTML5는 우리를 위해 많은 일을 할 수 있습니다. 가장 맛있는 것은 시맨틱 태그를 적용하는 것입니다. Chrome이나 HTML5를 지원하는 다른 브라우저에서 사용해 본 적이 있다면 정말 대단합니다. 이제 IE에서도 HTML5를 사용할 수 있으므로 이 기사가 도움이 될 것입니다.

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

먼저 Google에서 다음 html5.js 파일을 인용해야 합니다. 이점에 대해서는 설명하지 않겠습니다.

JavaScript 코드는 콘텐츠를 클립보드

1.3970632801ce119b8f1cf2e95842dc1e
2.7f3737d7f2b8d821c8e1fda4f0ca82983fa3f474cbb4b6d948eebecb1be5dde4
3.bd121e40e132cd2f69209d509c354edd

위 코드를 헤드 부분에 복사하세요. IE는 요소가 구문 분석되기 전에 이 요소를 알아야 하므로 이 js 파일은 다른 곳에서는 호출할 수 없습니다. 그렇지 않으면 유효하지 않습니다.)

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

두 번째 방법: JavaScript 코딩

JavaScript 코드는 콘텐츠를 클립보드에 복사합니다

1.<!--[if lt IE9]>   
2.<script>   
3.   (function() {  
4.     if (!   
5.     /*@cc_on!@*/ 
6.     0) return;  
7.     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;);  
8.     var i= e.length;  
9.     while (i--){  
10.         document.createElement(e[i])  
11.     }   
12.})()   
13.</script>  
14.<![endif]-->

하지만 위의 방법 중 어떤 방법을 사용하든 상관없습니다. HTML5는 기본적으로 인라인 요소로 작동하므로 이러한 요소를 레이아웃하려면 CSS를 사용하여 쉽게 레이아웃할 수 있도록 수동으로 블록 요소로 변환해야 합니다

XML/HTML 콘텐츠를 클립보드에 코드 복사

1./*html5*/
2.article,aside,dialog,footer,header,section,footer,nav,Figure,menu{display:block}

그러나 ie6/7/8인 경우 비활성화되어 있는 스크립트 사용자의 경우 스타일이 없는 "화이트보드" 웹 페이지가 됩니다. 어떻게 해결해야 할까요? noscript 로고. html5 태그를 html4 태그로 바꾸는 것은 호환성을 유지하기 위해 많은 해킹을 작성하는 것보다 쉽습니다.

XML/HTML 코드는 콘텐츠를 클립보드에 복사합니다.

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

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

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

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

불투명도 투명도

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

CSS 코드는 콘텐츠를 클립보드에 복사합니다.

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

여기 반투명 영역이 있습니다

opacity: .4;

filter:alpha(opacity=40);

border-radius/Box Shadow/Text Shadow Shadow

VML(벡터 마크업 언어) 및 자바스크립트를 사용하여 IE에서 이러한 효과를 얻을 수 있습니다. IE-CSS3을 참조하세요. HTC 파일을 참조한 후

IE 브라우저

에서 이 세 가지 CSS3 속성을 사용할 수 있습니다. CSS 코드는 콘텐츠를 클립보드에 복사합니다

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

사실 IE에는 그림자 및 그림자 효과를 얻기 위한 자체 필터가 있습니다.

그림자는 연속적인 그라데이션 그림자를 생성합니다

CSS 코드는 콘텐츠를 클립보드에 복사합니다

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

CSS 코드는 콘텐츠를 클립보드에 복사합니다

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

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

더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!