5546 sujets

Sémantique web et HTML

Problème avec valeur "auto" pour les images dans les navigateurs IE

Bonjour,

J'ai remarqué un nouveau problème de compatibilité avec les navigateurs IE. Je parle particulièrement des navigateurs 9, 10 et 11. Ce problème concerne peut-être aussi les version inférieures, mais ce n'est pas ma préoccupation première.

Voici les détails :

Auparavant, j'avais remarqué que IE en général ne gérait pas les valeurs AUTO dans le HEIGHT des balises images (depuis que l'on fait des sites responsive). J'avais pour habitude de mettre des commentaires conditionnels pour résoudre le problème. Je ne parle pas de Modernizr ou html5shim, car plus spécifique aux anciennes version d'IE (il me semble).

Mais récemment, j'ai remarqué que IE ne prenait plus en compte les commentaire conditionnels. J'ai même trouvé un article de windows qui en parle : https://msdn.microsoft.com/fr-fr/library/ie/hh801214%28v=vs.85%29.aspx

J'ai donc appliqué leur méthode et ça marche... en fait, plus ou moins. Sur IE, J'ai remarqué que je me retrouve avec 2 images l'une sur l'autre quand on réduit trop la fenêtre du navigateur en largeur. J'ai regardé dans le code avec firebugs et je remarque que le commentaire à sauté laissant donc 2 balises images au même endroit. Je ne sais pas si c'est une réaction normal une fois la page dans le navigateur.

Y aurait-il une solution pour éviter d'utiliser les commentaires conditionnels ?

Je remercie par avance tous ceux et celles qui voudront bien m'aider Smiley ravi
Salut,
Simplement en passant par js ou un langage côté serveur et utiliser une fonction qui va chercher le user agent.
Côté server c'est plus rapide car c'est lui qui génère la page, côté client (JS, coffeescript ...) il faut le le placer dans head après il est facile d'appliquer un style en js.
en Js

navigator.browser= (function(){
    var ua= navigator.userAgent, tem, 
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
      return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\bOPR\/(\d+)/)
        if(tem!= null) return 'Opera '+tem[1];
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();
var firefox_regx = /Firefox/;
var ie_regx = /IE/;


if(ie_regx.test(navigator.browser)){
  //TODO POUR IE
}else{
 //SINON ...
}
Sujet clos
Aller à