Configuration de l’affichage flexbox avec jQuery pour plusieurs navigateurs?

avoir un peu de mal. J’ai besoin de changer d’affichage: aucun à afficher: flex, d’affichage: flex-box, et d’affichage: -ms-flexbox mais cela semble casser mon code. Voici ce que j’ai eu jusqu’à présent:

$(elem).css({'display': 'flex', 'display': '-webkit-flex', 'display':'-ms-flexbox'}); 

et pendant que cela fonctionne:

 $(elem).css({'display': 'flex'}) 

Je dois avoir les deux autres pour Safari et IE10. Y a-t-il un moyen d’écrire cela pour que cela ne casse pas mon code? Jquery semble dérouté par cette syntaxe.

Je viens de rencontrer le même problème. Le problème est que vous ne pouvez pas spécifier plusieurs valeurs d’ display dans le même object, car vous ne pouvez avoir qu’un seul membre d’object appelé display .

Si vous ne craignez pas de supprimer accidentellement un autre style au niveau élément, procédez comme suit:

 $(elem).attr('style', 'display: -webkit-flex; display: flex'); 

(et bien sûr, ajoutez le supplément pour IE10 si vous en avez besoin).

Désolé d’être si tard pour la fête, mais peut-être que cela aidera les autres.

J’ai moi aussi rencontré ce problème et @eaj a une excellente idée de la raison pour laquelle cela se produit. J’ai adopté une approche légèrement différente puisque j’utilisais la flexbox sur d’autres éléments. J’ai assigné une classe comme celle-ci:

 .flex-container{ display: -webkit-box !important; display: -moz-box !important; display: -ms-flexbox !important; display: -webkit-flex !important; display: flex !important; } 

Ensuite, au lieu d’essayer de le changer en ajoutant des styles inline, vous pouvez simplement append la classe comme suit:

 $(elem).addClass('flex-container'); 

Le !important dans la classe remplacera l’ display:none existant display:none forcera à être display:none . Il y a quelques avantages ici: il est beaucoup plus propre sémantiquement, il est plus facile d’append des propriétés flexbox supplémentaires si vous en avez besoin (ma classe .flex-container actuelle avait ~ 20 propriétés différentes en raison des préfixes pour l’alignement au centre), plus facile à réutiliser même classe pour les autres éléments, et enfin si vous avez besoin que l’élément disparaisse à nouveau gracieusement, vous pouvez simplement appeler removeClass ().

Depuis jQuery 1.8.0, nul besoin d’append un préfixe de fournisseur. Cordialy Frédéric