Détecter le support du navigateur pour l'affichage: inline-block

Question

Comment détecter si un navigateur prend en charge l'affichage d'attribut CSS: inline-block?

Answer 1

Il n’existe aucun moyen de détecter cela avec Javascript car il s’agit d’un attribut CSS pur qui ne se rapporte à aucun objet ou fonction en Javascript. La meilleure chose que je puisse vous dire est de vérifier ici pour une bonne compatibilité. liste et utilise CSS pour créer une solution de contournement.

Answer 2

Eh bien, voici ce que vous pouvez faire si vous voulez le faire simplement en examinant le résumé du navigateur avec javascript au lieu de l'utilisateur reniflant:

Configurez un scénario de test et un scénario de contrôle. Par exemple, avec la structure suivante:

• div
  • div w / content "test"
  • div w / content "test2"

Insérez une copie dans le document avec les deux divisions internes définies sur inline-block, puis insérez une autre copie dans le document avec les deux divisions internes définies sur bloc. Si le navigateur prend en charge inline-block, les divs contenant auront des hauteurs différentes.

Réponse alternative:

Vous pouvez également utiliser getComputedStyle pour voir comment le navigateur traite les CSS d'un élément donné. Donc, en théorie, vous pouvez ajouter un élément avec "display: inline-block". et puis vérifiez le computedStyle pour voir s'il a survécu. Seul problème: IE ne supporte pas getComputedStyle. Au lieu de cela, il a currentStyle. Je ne sais pas si currentStyle fonctionne de manière identique (il fonctionne probablement de la même manière que le comportement souhaité: ignorer les valeurs "non valides").

Answer 3

Selon les diagrammes QuirksMode , les seuls navigateurs grand public ne prenant pas en charge inline-block sont IE6 et 7. (Bien, ils le supportent, mais uniquement pour les éléments ayant un type natif de type inline .) I ' Supposons simplement qu’il soit pris en charge, puis appliquez une solution de contournement pour IE6 / 7 via les commentaires conditionnels .

(Remarque: j'ignore le manque de prise en charge de inline-block dans Firefox 2 et je suppose que la grande majorité des utilisateurs ont mis à niveau vers FF3, mais une brève recherche sur Google n'a pas révélé de chiffres pour le confirmer. YMMV.)

Si vous ne pouvez utiliser que le support de JavaScript, vous devrez cependant recourir au reniflement agent-utilisateur. La classe YAHOO.env.ua de la La bibliothèque YUI est un bloc de code pratique que vous pouvez copier et utiliser. (Il est sous licence BSD, ne dépend pas d'autres parties de la bibliothèque YUI et ne compte que 25-30 lignes sans commentaires.)

Answer 4

Au fait: il existe un chouette manière d’implémenter des blocs en-ligne croisés dans IE6 +, FF2 +, Opera et WebKit avec CSS uniquement. (CSS non valide, mais toujours uniquement CSS.)

Answer 5

Christopher Swasey est tout à fait correct.

J'ai préparé une démonstration de sa technique sur jsFiddle à l'adresse http://ajh.us/test- bloc en ligne .

Le code est essentiellement:

var div = document.createElement('div');
div.style.cssText = 'display:inline-block';

// need to do this or else document.defaultView doesn't know about it
$('body').append(div); 
// that was jQuery. It’s possible to do without, naturally

var results = false;

if (div.currentStyle) {
    results = (div.currentStyle['display'] === 'inline-block');
} else if (window.getComputedStyle) {
  results = document.defaultView.getComputedStyle(div,null).getPropertyValue('display')=== 'inline-block';  
}

//clean up
$(div).remove();

alert('display: inline-block support: '+results);

Notez que cette même technique fonctionne également pour détecter le support de display: run-in .