web-dev-qa-db-fra.com

Forcer Internet Explorer 9 à utiliser IE 9 Mode

J'utilise le doctype HTML5 avec la méta-balise X-UA-Compatible vers le haut:

<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7]>    <html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8]>    <html lang="en-us" class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    ...

Mais Internet Explorer 9 pour certains utilisateurs rend la page en mode de compatibilité. J'imagine que c'est parce qu'ils ont activé le paramètre "Afficher tous les sites Web en mode d'affichage de compatibilité". Existe-t-il un moyen de forcer IE9 à utiliser le navigateur et le mode Document IE9?

internet-explorerinternet-explorer-9cross-browserdoctype
19
Johnny Oshika

Il s'avère que la solution consiste à définir X-UA-Compatible dans l'en-tête HTTP et non dans le code HTML:

 X-UA-Compatible: IE=Edge,chrome=1

Cela forcera Internet Explorer à utiliser le dernier moteur de rendu, même si l'option "Afficher tous les sites Web en mode d'affichage de compatibilité" est activée.

26
Johnny Oshika

Cela fonctionne également avec ceci dans <head> en HTML:

  <meta http-equiv="X-UA-Compatible" content="IE=9">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
10
Matěj Polák

La méta-étiquette X-UA-COMPATIBLE doit être la première balise dans la tête, sinon elle ne fonctionnera pas. Voir cette réponse: https://stackoverflow.com/a/22233206/3329906 .

Tous ces trucs en-tête http sont excessifs.

5
jhiller

veuillez ajouter dans la section head de votre site web, j'espère que cela vous aidera.

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=5, IE=7, IE=8, IE=9, IE=10" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
3
Ashish Srivastava

Comme JohnnyO le dit, il doit être envoyé en tant qu'en-tête. Dans PHP ajoutez ceci (avant toute autre sortie est envoyée):

<?php header( 'X-UA-Compatible: IE=Edge,chrome=1' ); ?>

Dans Wordpress, cela serait probablement mieux si vous le placiez comme la toute première ligne de votre fichier header.php, tant que vous n'avez aucune sortie (ou erreur) avant que ce fichier ne soit restitué, cela devrait fonctionner.

Si des erreurs sont générées dans le navigateur, vous pouvez indiquer que les erreurs doivent être consignées uniquement et non pas affichées à l'écran en ajoutant quelque chose comme ceci à votre application:

ini_set('display_errors', 0);
ini_set('log_errors', 1);

Dans Wordpress, vous pouvez ajouter près du haut du fichier wp-config.php.

Si la mise en cache est activée avec quelque chose comme WP SuperCache ou W3 Total Cache, tous les paris concernant le comportement de votre site sont désactivés - vous devrez faire quelques recherches pour savoir comment ajouter des en-têtes supplémentaires avec votre plugin de mise en cache.

1
cwd

Ajoutant seulement 

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

ça ira ;)

Par exemple:

<!DOCTYPE html>
<html lang="en-US" class="css3transitions"> 
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
0
Sagar Ranpise

@netzaffin a raison - si X-UA-Compatible est la première balise méta de la section HEAD, IE9 fonctionne.

0
Branka Kranjac