Dieses Mal werde ich Ihnen die Kompatibilitätsprobleme des neuen H5-Tab-Browsers vorstellen. Was sind die Vorsichtsmaßnahmen beim Umgang mit den Kompatibilitätsproblemen des H5-neuen Tab-Browsers? sehen.
Schließlich handelt es sich bei der HTML5-Spezifikation um eine Spezifikation, die gerade erst definiert wurde, und einige Browser unterstützen die neuen Tags und Attribute nicht, insbesondere Browser IE8 und niedriger. Im Folgenden werden einige praktische Methoden zur Verwendung neuer HTML5-Tags in Seiten vorgestellt. Der Zweck besteht darin, den neuen Tags in HTML5 eine begrenzte Unterstützung in Low-Level-Browsern zu ermöglichen und nicht die gesamte Seitenfunktion zu beeinträchtigen.
Lassen Sie den Browser die neuen Tags in der HTML5-Spezifikation erkennen
Im IE8-Browser Die Unterstützung für neue HTML5-Tags wurde noch nicht hinzugefügt, sodass der Inhalt in neuen HTML5-Tags nicht direkt in IE8 angezeigt werden kann. Glücklicherweise unterstützt IE8/IE7/IE6 Tags, die über die Methode document.createElement generiert wurden. Mit dieser Funktion können Sie dafür sorgen, dass diese Browser neue HTML5-Tags unterstützen:
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])
}Nachdem der Browser das neue Tag unterstützt, müssen Sie den Standardstil des Tags hinzufügen:
article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}
mark{background:#FF0;color:#000}Auf diese Weise können zwei einfache Teile von JavaScript-Code und CSS-Code erstellt werden werden von Browsern ab IE8 unterstützt. Neue Tags in HTML5. Der beste Weg ist natürlich, ein ausgereiftes Framework zu verwenden. Es gibt derzeit mehrere Frameworks, die auf dieser Idee basieren. Das am häufigsten verwendete Framework ist das Hinzufügen eines Verweises auf das Framework im Kopfteil der Seite:
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> <![endif]-->
Abwärtskompatibilität neuer Funktionen in HTML5
Generalisiertes HTML5. Es umfasst HTML5, CSS3 und neue APIs. Da neue Funktionen möglicherweise Probleme mit der Browserkompatibilität haben, ist es unbedingt erforderlich, bei der Verwendung neuer Funktionen zu prüfen, ob der Browser diese Funktion unterstützt. Wenn der Browser keine neuen Funktionen unterstützt, kann eine entsprechende Abwärtskompatibilitätsverarbeitung durchgeführt werden. Derzeit gibt es keine einheitliche Methode zur Erkennung der Unterstützung neuer Funktionen. Einige neue Funktionen verfügen über entsprechende APIs, die identifiziert werden können, und einige neue Funktionen können nur durch bestimmte Techniken identifiziert werden. Glücklicherweise haben begeisterte Ingenieure im Ausland mehrere Frameworks zur Erkennung neuer Funktionen entwickelt. Unter anderem weist Modernizr eine höhere Erkennungsgenauigkeit und Nutzungsrate auf.
Das Prinzip des Modernizr-Frameworks besteht darin, automatisch zu erkennen, ob der Browser neue Funktionen unterstützt, und die entsprechende Klasse zum -Tag hinzuzufügen. Wenn der Browser eine Funktion unterstützt, wird eine Klasse mit dem Namen der Funktion hinzugefügt. Andernfalls wird eine Klasse mit dem Präfix „no-“ und dem Namen der Funktion hinzugefügt. Gleichzeitig wird auch ein Objekt mit dem Namen modernizr generiert. Durch die Beurteilung der Attributwerte, die die einzelnen Funktionen dieses Objekts darstellen, können Sie feststellen, ob der aktuelle Browser diese neue Funktion unterstützt. Das Modernizr-Framework umfasst auch die Funktionen des html5shim-Frameworks, wodurch Browser IE8 und niedriger die Unterstützung neuer Tags ermöglichen.
Die Methode zur Verwendung von Modernizr ist sehr einfach. Geben Sie zunächst die JavaScript-Datei des Frameworks im Kopfteil ein:
<script src="js/modernizr.min.js"></script>
Fügen Sie zweitens einen Namen mit dem Namen no-js im html-Tag Klassen:
<html class="no-js">
<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">
#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;
}Audio- und Videokompatibilität
Browser |
Version |
Unterstützte Formate |
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 |
Opera |
10.0+ |
Ogg Vorbis, WAV |
大约有80%的浏览器支持HTML5的
<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>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
spring mvc+localResizeIMG实现H5端图片压缩上传
Das obige ist der detaillierte Inhalt vonKompatibilitätsprobleme mit dem neuen H5-Tab-Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
