Est-il acceptable d'utiliser le zoom: 1 dans mes classes CSS?

Question

Chaque fois que je trouve IE affiche mon site bizarre (différent de Chrome et Firefox), je tente de mettre un zoom:1 dans la classe CSS pour la partie qui est affichée bizarre. Beaucoup de temps, ce résout le problème et le fait paraître compatible avec les autres navigateurs.

est-il un problème à l'utilisation zoom:1? Je sais que mon CSS ne validera pas, mais qu'il y a des problèmes du monde réel qui peuvent survenir si je me fie trop sur l'utilisation zoom:1?

Answer 1

Le problème que vous combattez c'est la question IE hasLayout. est un bon article et vue d'ensemble sur les propriétés aussi déclencheur « ayant la mise en page » dans IE.

Je ne connais pas les effets secondaires à zoom: 1 sauf que ce n'est pas valide W3C. Je suis sûr que je l'utilise moi-même dans certains projets.

Cependant, il y a bien sûr la chance à distance que zoom devient un vrai propriété CSS jour - ou s'utilisé dans un autre contexte propriétaire comme sur l'iPad ou autre -. Ce qui pourrait conduire à des choses de rupture

vraiment propre solution , le zoom est pas. Si possible, il est une bonne idée de donner à l'élément « mise en page » d'une autre manière, comme indiqué dans l'article.

Answer 2

Au contraire, il y a des inconvénients définitives à l'utilisation du zoom: 1, même dans IE. D'habitude, je n'inclus dans IE seule feuille de style, mais même dans les derniers jours, j'ai lutté avec des problèmes de mise en page parce que je choisi d'utiliser * {zoom: 1;}

- les plats à emporter - l'utiliser sur une base limitée. Si vous ne vous préoccupez IE7 +, vous pouvez utiliser min-height: 1%, ce qui a le même effet de déclencher hasLayout

Answer 3

En Novembre 2012, il est de plus en plus probable que le zoom sera un jour devenir valide CSS, bien qu'il semble que l'utiliser dans le contexte ci-dessus ne devrait pas avoir d'effets secondaires négatifs.

Voir: http://dev.w3.org/csswg/css-device -adapt / ou http://www.w3.org/TR/ css-dispositif adapter /

Answer 4

zoom est uniquement pris en charge par IE, donc pas pour le moment. Potentiellement il pourrait y avoir une propriété future appelé zoom qui pourrait gâcher les choses, mais il est peu probable en raison de l'utilisation généralisée.

Answer 5

display: inline-block; fait la même chose, mais est un code standard.

Dans le rare cas, il crée un problème, vous pouvez utiliser

display: block !important; /* or inline, etc. */ 
display: inline-block; /* in this order */

pour l'envoyer uniquement aux anciennes versions d'Internet Explorer pour laquelle il est utile.