H5 새 태그의 브라우저 호환성 문제에 대한 자세한 설명
- Y2J원래의
- 2017-05-22 13:48:543794검색
결국 HTML5 사양은 이제 막 정의된 사양이므로 새 태그와 새 속성을 지원하지 못하는 브라우저도 있습니다. 특히 IE8 이하의 브라우저에서는 더욱 그렇습니다. 다음은 HTML5 새 태그 처리의 브라우저 호환 버전에 대한 소개입니다. 필요한 친구들은
을 참조하면 됩니다. 결국 HTML5 사양은 아직 정의된 사양이 있습니다. 특히 IE8 이하 브라우저의 경우 새 태그와 새 속성을 지원할 수 없습니다. 다음은 페이지에서 HTML5 새 태그를 사용하는 몇 가지 실용적인 방법을 소개합니다. 그 목적은 HTML5의 새 태그가 하위 수준 브라우저에서 제한적으로 지원되고 전체 페이지 기능에 영향을 미치지 않도록 하는 것입니다.
브라우저가 HTML5 사양의 새 태그를 인식하도록 합니다.
IE8 브라우저의 경우 HTML5 새 태그에 대한 지원이 아직 추가되지 않았으므로 HTML5 새 태그의 콘텐츠를 IE8에서 직접 표시할 수 없습니다. 다행히 IE8/IE7/IE6은 document.createElement 메소드로 생성된 태그를 지원합니다. 이 기능을 사용하면 이러한 브라우저가 HTML5 새 태그를 지원하도록 할 수 있습니다.
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(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}브라우저가 새 태그를 지원하면 태그, 태그의 기본 스타일을 추가해야 합니다:
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}이러한 방식으로 JavaScript 코드와 CSS 코드의 두 가지 간단한 조각으로 IE8 이하의 브라우저가 새 태그를 지원할 수 있습니다. HTML5에서. 물론 가장 좋은 방법은 성숙한 프레임워크를 직접 사용하는 것입니다. 현재 가장 많이 사용되는 프레임워크는 html5shim을 사용하는 방법이 매우 간단합니다. 페이지 헤드 부분의 프레임 은
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
-
HTML5의 새로운 기능과의 호환성으로 인용할 수 있습니다.
<script src="js/modernizr.min.js"></script>두 번째로
에 no-js라는 클래스를 추가합니다. html 태그 :
<html class="no-js">브라우저에서 JavaScript가 비활성화되어 있지 않으면 브라우저가 페이지를 로드한 후 html 태그의 클래스가 동적으로 교체되고 추가됩니다. 로드 후 html 태그는 다음과 같습니다.
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">CSS 코드에서 이러한 클래스를 사용하여 이전 버전과의 호환성 코드를 추가할 수 있습니다. 다음은 여러 배경 이미지를 사용하는 예입니다.
#nice {
background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
background: url(background-one.png) top left repeat-x,url(background-two.png) bottom left repeat-x;
} 프레임워크에 관심이 있는 독자는 Modernizr 공식 웹사이트에서 더 자세한 예제와 사용 방법을 찾아볼 수 있습니다.
오디오 및 비디오 호환성
브라우저 |
버전 |
지원 형식 |
Internet Explorer |
9.0+ |
MP3, AAC |
크롬 |
6.0+ |
Ogg Vorbis, MP3, WAV(9.0+) |
Firefox |
3.6+ |
Ogg Vorbis, WAV |
사파리 |
5.0+ |
MP3, AAC, WAV |
오페라 |
10.0+ |
오그 보비스, WAV |
大约有80%的浏览器支持HTML5的b97864c2e0ef2353a16c4d64c7734e92标签，但是并没有一种统一的音频格式。从支持的格式来看，要让所有的浏览器可以播放audio元素上的音频，最佳的方式是提供MP3和Ogg两种格式，兼容代码如下：
<audio controls>
<source src="elvis.mp3" type='audio/mpeg; codecs="mp3"'>
<source src="elvis.oga" type='audio/ogg; codecs="vorbis"'>
<!-- 向后兼容代码：如，显示提示信息、提供下载链接使用flash播放器等 -->
浏览器不支持<code>audio</code>标签
</audio>视频也有和音频类似的状况，如下是浏览器支持视频的格式列表：
浏览器 |
版本 |
支持格式 |
Internet Explorer |
9.0+ |
MP4 |
Chrome |
6.0+ |
MP4,WebM,Ogg |
Firefox |
3.6+ |
WebM,Ogg |
Safari |
5.0+ |
MP4 |
오페라 |
10.0+ |
WebM,Ogg |
从浏览器支持的视频格式来看，最佳的方式是提供WebM和MP4两种格式的视频。兼容代码如下：
<video controls>
<source src=video.webm type=video/webm>
<source src=video.mp4 type=video/mp4>
<!—向后兼容代码: -->
<iframe width="480" height="360" src="http://www.youtube.com/embed/xzMUyqmaqcw?rel=0" frameborder="0" allowfullscreen></iframe>
</video>【相关推荐】
1. Html5免费视频教程
5. \9和\0可能hack IE11\IE9\IE8无效原因详解
위 내용은 H5 새 태그의 브라우저 호환성 문제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!