Explication détaillée des solutions de compatibilité du navigateur HTML5-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-03-16 16:19:37

original

2080 Les gens l'ont consulté

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; 
}

Copier après la connexion

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 <myElement> :

<!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>

Copier après la connexion

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]-->

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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!