IE et problèmes de doctype HTML5
J'utilise le grand passe-partout HTML5. C'est un excellent projet mais j'ai de gros problèmes de rendu dans IE 8 et 7 (peut-être 8 mais je n'ai pas encore essayé))
Les fichiers ont le doctype HTML5:
<!doctype html>
<head>
Mais le problème est que l'absence de doctype complet et laid comme ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
J'obtiens toutes sortes de problèmes de rendu: centrage par marge: l'automobile ne fonctionne pas, les hauteurs, les largeurs, les martelages et les rembourrages se comportent tous comme des fous et toute ma disposition est rompue avec juste <!doctype> mais si je passe à l'ancien, tout fonctionne très bien (enfin, pas génial, c'est toujours IE, mais comme prévu)
HTML5 Boilerplate est livré avec Modernizer qui, je pense, devrait résoudre ce problème, mais cela ne fonctionne pas. D'après mes "recherches" (Google), j'ai trouvé que IE entre en mode bizarrerie _ <!doctype>, donc la question est ...
Existe-t-il un moyen d'empêcher IE de passer en mode bizarre avec <!doctype>?
Ou du moins pour ne pas casser les marges, les largeurs, les rembourrages, etc.?
Edit: Ceci est la tête pleine:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
IE ne passe pas en mode bizarreries avec ce doctype. Le passe-partout devrait résoudre les problèmes de IE, pas les causer. Vous manquez le <html> élément après le doctype. Ajoutez cela pour voir si les choses changent. HTML5 ne l'exige pas mais, s'il est manquant, soit IE ou passe-partout peut devenir fou selon les documents.
En outre, supprimez simplement les commentaires après le doctype et cela devrait faire disparaître le problème.
Essayez de mettre ceci dans le <head></head> tag:
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
S'il est déjà là, supprimez-le et vous obtiendrez peut-être les résultats souhaités.
IE ne va pas dans des bizarreries avec le doctype HTML - c'est tout le point!
Ce qui est bien avec ce nouveau DOCTYPE, en particulier, c'est que tous les navigateurs actuels (IE, FF, Opera, Safari) le regarderont et passeront le contenu en mode standard - même s'ils n'implémentent pas HTML5. Cela signifie que vous pouvez commencer à écrire vos pages Web en utilisant HTML5 dès aujourd'hui et les faire durer très, très, très longtemps.
(http://ejohn.org/blog/html5-doctype/)
Cependant, avoir quelque chose avant le doctype (nouvelles lignes, commentaires, etc.) le sera.
Je vérifierais ce que vous faites - le doctype HTML5 ne mettra pas votre navigateur en bizarrerie.
Essayez d'enregistrer le fichier sous TF-8 sans BOM. Ça m'a aidé.
Je ne vois rien de mal avec le balisage pleine tête que vous avez publié. Il s'agit d'un balisage standard largement utilisé dans les plates-formes qui incluent Modernizr , une bibliothèque JavaScript astucieuse utilisée pour détecter les fonctionnalités du navigateur.
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
Je l'utilise dans mon application actuelle et je n'ai aucun problème avec n'importe quel navigateur. Bien que je l'utilise comme ça:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
Pour tester les IE commentaires conditionnels, j'ai testé sur IE9, IE8 et IE7, avec les majuscules et les minuscules doctype, juste pour une double vérification.
La seule chose étrange que j'ai observée sur IE7 était que les polices Web (les quatre dans mon application) ne pouvaient pas s'afficher parfois, lorsque j'utilisais <!doctype html> au lieu de <!DOCTYPE html>.
FYI: Je viens de vérifier et de voir que le HTML5 Boilerplate Project a suppression du support pour IE commentaires conditionnels le 24 septembre 2013. I Je ne peux pas confirmer quand des commentaires conditionnels ont été introduits dans le projet, mais je peux voir que il se trouvait autour de la balise body lorsque le projet a été porté sur Github le 24 janvier 2010.
Il est probable qu'il passe en mode de compatibilité avec les commentaires conditionnels. Nous vous recommandons de définir le x-ua-compatible en-tête côté serveur dans un fichier .htaccess ou d'autres fichiers de configuration de serveur.
Je ne suis pas trop un "wiz", mais cela ne fonctionnerait-il pas de faire du html conditionnel et de déclarer un doctype HTML 4.01 pour IE8 et ci-dessous comme ceci:
<!-- HTML 5 doctype -->
<!doctype html>
<!-- HTML 4.01 Doctype -->
<!--[if lte IE 8]>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<![endif]-->
Si cela ne fonctionne pas dans les anciens navigateurs (en raison de la lecture de deux doctypes par le navigateur), vous pouvez essayer ceci:
<!DOCTYPE HTML <!--[if lte IE 8]>PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
<![endif]-->>