Comment rendre de nouveaux éléments en HTML5 compatibles avec les anciens conseils du didacticiel browsers_html5

Une question que le professeur nous a posée est : Comment rendre IE8 compatible avec ces balises ? (Vous devez concevoir le DOM en JS)

Même si ce dont je viens de parler aujourd'hui, vous devez quand même le comprendre.

Copier le code

Le code est le suivant :

🎜>

Zone de navigation

Zone d'article

Zone inférieure ;/html>


s'affiche comme :

|---------- ------------ --------Firefox---------------------------------- -------- ----------|

|Zone supérieure

|Zone de navigation| 🎜>
|------------------------------------------ ------- ------------------------------------------ --|

Le style d'affichage dans les anciens navigateurs est :

------------------------- -----Navigateur IE6-- ------------------------------------------------ --


---------------------------------Navigateur IE8------ ----- ------------------------------------------


C'est pareil. Si je ne me trompe pas, les anciens navigateurs ne reconnaissent pas ces balises nouvellement ajoutées, ils utilisent donc des éléments en ligne pour les gérer. Par conséquent, une solution consiste à les transformer en éléments de bloc afin qu'ils ne soient pas dans le fichier. La même ligne, afin que le même effet puisse être affiché dans les anciens et les nouveaux navigateurs. De plus, il s'agit de permettre au navigateur de reconnaître la balise. La solution spécifique pour ajouter de nouvelles balises est :

IE8/IE7/. IE6 prend en charge le document. Pour les balises générées par la méthode createElement, vous pouvez utiliser cette fonctionnalité pour permettre à ces navigateurs de prendre en charge les nouvelles balises HTML5. Le code est le suivant :

document.createElement('new tag'); //Ajouter une nouvelle balise
Le code JS est le suivant :




Copiez le code


Le code est la suivante :


document.createElement('header');

document.createElement('nav'); '); document.createElement('footer'); Ou créez des balises directement dans une boucle :

Copier le code


Le code est le suivant :

var e = "abbr, article, aparté, audio, canvas, datalist, détails, boîte de dialogue, source d'événement, figure, pied de page, en-tête, hgroup, marque, menu, compteur, navigation, sortie, progression, section, heure, vidéo".split(', ');
var i= e.length;

while (i--){

document.createElement(e[ i]) } Style CSS définissant le style par défaut :

Copier le code


Le code est le suivant :

De plus, une autre façon; consiste à utiliser la méthode du framework, en utilisant des commentaires conditionnels et du code JS pour obtenir

Copier le code


Le code est le suivant :

🎜>Vous pouvez résoudre le problème de compatibilité en ajoutant directement cette ligne de code. Notez le

dans les conditions