Maison >interface Web >Tutoriel H5 >Explication détaillée des solutions de compatibilité du navigateur HTML5

Explication détaillée des solutions de compatibilité du navigateur HTML5

黄舟original: 2017-03-16 16:19:372078parcourir

Actuellement, la plupart des navigateurs prennent en charge HTML5. Cependant, certains navigateurs de versions inférieures rencontrent des problèmes avec la prise en charge de HTML5.

Les navigateurs de version basse prennent en charge HTML5

tous les navigateurs, et les éléments non reconnus seront automatiquement traités comme des éléments en ligne. Par conséquent, vous pouvez utiliser la méthode suivante pour apprendre au navigateur à gérer les éléments HTML « inconnus ».

Définit les éléments HTML5 comme éléments de bloc

HTML5 définit 8 nouveaux éléments sémantiques HTML. Tous ces éléments sont des éléments de niveau bloc.
Afin de permettre aux anciennes versions des navigateurs d'afficher correctement ces éléments, vous pouvez définir l'attribut CSS display sur le bloc valeur :

header, section, footer, aside, nav, main, article, figure {    display: block; 
}

en HTML Ajouter un nouvel élément

L'exemple suivant ajoute un nouvel élément au HTML et définit un style pour l'élément. Le nom de l'élément est 42e526b9ba2ad1676af0e54be02a3dd4 :

<!DOCTYPE html><html><head><meta charset="utf-8">
  <title>为 HTML 添加新元素</title>
  <script>document.createElement("myElement")</script>
  <style>
  myElement{    
  display: block;    
  background-color: #ddd;    
  padding: 50px;    
  font-size: 30px;  
  } 
  </style> 
  </head>
  <body>
  <h1>我的第一个标题</h1>
  <p>我的第一个段落。</p>
  <myElement>我的第一个新元素</myElement>
  </body>
  </html>

document.createElement(. "myElement" ) consiste à ajouter de nouveaux éléments au navigateur IE.

Problèmes du navigateur Internet Explorer

Vous pouvez utiliser la méthode ci-dessus pour ajouter de nouveaux éléments au navigateur, mais IE8 et versions antérieures ne peuvent pas prendre en charge cette méthode.
Nous pouvons utiliser « HTML5 Enabling JavaScript », « shiv » créé par Sjoerd Visscher pour résoudre ce problème :

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

<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

ci-dessus La fonction du code est de lire le fichier html5.js et de l'analyser lorsque la version du navigateur IE est inférieure à IE9. La première est la ressource nationale de Google et la seconde est la ressource nationale de Baidu.

Pour navigateur IEhtml5shiv est une meilleure solution. html5shiv résout principalement le problème selon lequel les nouveaux éléments proposés par HTML5 ne sont pas reconnus par IE6-8. Ces nouveaux éléments ne peuvent pas être utilisés comme nœuds parents pour envelopper des éléments enfants et les styles CSS ne peuvent pas être appliqués.

Ce qui suit est un exemple d'utilisation de la solution html5shiv :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js">
  </script>
  <![endif]--></head><body><h1>我的第一个HTML5页面</h1>
  <article>Hello，world！</article>
  </body>
  </html>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Stockage Web HTML5-analyse d'exemples de code SQL WebArticle suivant：Stockage Web HTML5-analyse d'exemples de code SQL Web

Articles Liés

Voir plus