Maison > Article > interface Web > Résoudre les problèmes de compatibilité du navigateur avec les nouvelles balises HTML5
Après tout, la spécification HTML5 est une spécification qui vient d'être définie. Certains navigateurs ne peuvent toujours pas prendre en charge les nouvelles balises et les nouveaux attributs, notamment les navigateurs d'IE8 et inférieurs. Ce qui suit est une introduction à la version compatible avec les navigateurs pour gérer les nouvelles balises HTML5. Les amis qui en ont besoin peuvent se référer à
Après tout, la spécification HTML5 est une spécification qui vient d'être définie. qui ne prend pas en charge les nouvelles balises et les nouvelles propriétés, en particulier pour les navigateurs IE8 et inférieurs. Ce qui suit présente quelques méthodes pratiques pour utiliser les nouvelles balises HTML5 dans les pages. Le but est de permettre aux nouvelles balises HTML5 de bénéficier d'une prise en charge limitée dans les navigateurs de bas niveau et de ne pas affecter l'ensemble de la fonction de la page.
Laisser le navigateur reconnaître les nouvelles balises dans la spécification HTML5
Dans le navigateur IE8 La prise en charge des nouvelles balises HTML5 n'a pas encore été ajoutée, de sorte que le contenu des nouvelles balises HTML5 ne peut pas être affiché directement dans IE8. Heureusement, IE8/IE7/IE6 prend en charge les balises générées par la méthode document.createElement. Vous pouvez utiliser cette fonctionnalité pour que ces navigateurs prennent en charge les nouvelles balises 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]) }<.> Une fois que le navigateur prend en charge la nouvelle balise, vous devez également ajouter le style par défaut de la balise :
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block} mark{background:#FF0;color:#000}Ces deux codes JavaScript simples et un code CSS peuvent permettre aux navigateurs IE8 et inférieurs de prendre en charge les nouvelles balises en HTML5. Bien sûr, le meilleur moyen est d'utiliser directement un framework mature.Il existe actuellement plusieurs frameworks basés sur cette idée. Le framework le plus couramment utilisé est le framework html5shim. La méthode d'utilisation de html5shim est très simple. dans la partie en-tête de la page :
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
Rétrocompatibilité des nouvelles fonctionnalités en HTML5
<script src="js/modernizr.min.js"></script>Deuxièmement, ajoutez-le sur la balise html Une classe nommée no-js :
<html class="no-js">Si le navigateur ne désactive pas JavaScript, une fois que le navigateur charge la page , la classe sur la balise html effectuera une substitution et un ajout dynamiques. Après le chargement, la balise html ressemble à ce qui suit :
<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">Dans le code CSS, vous pouvez ajouter du code de compatibilité ascendante en utilisant ces classes suivantes. est une méthode utilisant plusieurs exemples d'images d'arrière-plan :
#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; }Les lecteurs intéressés par ce framework peuvent parcourir le site officiel de Modernizr pour des exemples plus détaillés et une manière d'utiliser .
Compatibilité audio et vidéo
Navigateur |
Version |
Formats pris en charge |
Internet Explorer |
9.0+ |
MP3, AAC |
Chrome |
6.0+ |
Ogg Vorbis, MP3, WAV (9.0+) |
Firefox |
3.6+ |
Ogg Vorbis, WAV |
Safari |
5.0+ |
MP3, AAC, WAV |
Opéra |
10.0+ |
Ogg Vorbis, 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 |
Opera |
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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!