Detaillierte Erläuterung der Kompatibilitätslösungen für HTML5-Browser-H5-Tutorial-php.cn

Detaillierte Erläuterung der Kompatibilitätslösungen für HTML5-Browser

黄舟

Freigeben： 2017-03-16 16:19:37

Original

2042 Leute haben es durchsucht

Derzeit unterstützen die meisten Browser HTML5. Allerdings haben einige Browser niedrigerer Versionen Probleme mit der HTML5-Unterstützung.

Browser mit niedriger Version unterstützen HTML5

alle Browser und nicht erkannte Elemente werden automatisch als Inline-Elemente verarbeitet. Daher können Sie mit der folgenden Methode dem Browser beibringen, mit „unbekannten“ HTML-Elementen umzugehen.

Definiert HTML5-Elemente als Blockelemente

HTML5 definiert 8 neue semantische HTML-Elemente. Alle diese Elemente sind Elemente auf Blockebene.
Damit ältere Browserversionen diese Elemente korrekt anzeigen können, können Sie das CSS-Attribut display auf den Werteblock setzen:

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

Nach dem Login kopieren

zu HTML Ein neues Element hinzufügen

Das folgende Beispiel fügt ein neues Element zu HTML hinzu und definiert einen Stil für das Element. Der Elementname lautet <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>

Nach dem Login kopieren

document.createElement(. „myElement“ dient dazu, dem IE-Browser neue Elemente hinzuzufügen.

Probleme mit dem Internet Explorer-Browser

Sie können die obige Methode verwenden, um dem Browser neue Elemente hinzuzufügen, aber IE8 und niedrigere Versionen unterstützen diese Methode nicht.

Wir können „HTML5 Enabling
JavaScript“, „shiv“ von Sjoerd Visscher verwenden, um dieses Problem zu lösen:

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

oben Die Funktion des Codes besteht darin, die Datei html5.js zu lesen und zu analysieren, wenn die IE-Browserversion kleiner als IE9 ist. Ersteres ist die nationale Google-Ressource und letzteres ist die inländische Baidu-Ressource.

Für

IE-Browserhtml5shiv ist eine bessere Lösung. html5shiv löst hauptsächlich das Problem, dass die von HTML5 vorgeschlagenen neuen Elemente von IE6-8 nicht erkannt werden. Diese neuen Elemente können nicht als übergeordnete Knoten zum Umschließen untergeordneter Elemente verwendet werden und CSS-Stile können nicht angewendet werden.

Das Folgende ist ein Beispiel für die Verwendung der html5shiv-Lösung:

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Kompatibilitätslösungen für HTML5-Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!