suchen

Heim >Web-Frontend >H5-Tutorial >Detaillierte Erläuterung der Kompatibilitätslösungen für HTML5-Browser

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

黄舟
黄舟Original
2017-03-16 16:19:372099Durchsuche

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

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

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


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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-Webspeicher-Web-SQL-Beispielcode-AnalyseNächster Artikel：HTML5-Webspeicher-Web-SQL-Beispielcode-Analyse

In Verbindung stehende Artikel

Mehr sehen