ZOOM change la mise en page de conception
Je travaille sur un nouveau site Web, qui devrait être "parfait" - compatible avec IE6 +, FF, chrome, opera & Safari.
Je l'ai fait compatible avec tous ces navigateurs, mais il y a un problème que je ne peux pas gérer - lors du changement de zoom, toute la mise en page devient désordonnée.
Exemple de violon avec le problème: http://jsfiddle.net/pdqrq/1/
In Chrome (14.0.835), FF (7.0.1) & IE9, lors du zoomer - la taille de la boîte en haut à droite change (au moins on l'ait l'air), puis ce n'est pas raison aligné avec la boîte ci-dessous.
Edit:
[.____] Je sais quelle est la cause - la frontière!
Explication: La fonction de zoom sur chaque navigateur modifiant la largeur/la hauteur de la DIV mais pas la taille de la bordure provoque donc ce problème/flotteur. Si je supprimais la frontière, tout fonctionne Perefct.
mais je veux utiliser la frontière ou sinon mon design sera beaucoup plus laid.
Comment puis-je réparer?
Merci!
Mes meilleurs devinons pour la raison pour laquelle cela est dû à des erreurs d'arrondies à la hausse. Par exemple, si vous imaginez une boîte de 250px de large et contient deux boîtes côte à côte à côte de 125px de large chacune. Clairement ces côtés côte à côte. Si vous effectuez un zoom arrière de sorte que vous êtes à la moitié de la taille, la boîte extérieure sera de 125px et les internes 62.5px chacun des deux demi-pixels de 63px sont aussi petits que vous obtenez). Ces deux arrivent maintenant à une largeur totale de 126px, donc ne conviendrez plus côte à côte et il faudrait aller sous l'autre.
C'est fondamentalement le principe que vous avez au travail ici, je pense. La meilleure solution que je puisse voir serait de faire les deux côtés aux boîtes latérales plus étroites et flottantes à droite afin que votre bordure droite soit ininterrompue. Cela peut signifier un fossé légèrement plus grand sur le milieu, mais cet écart peut espérer absorber les erreurs d'arrondissement lorsque vous effectuez un zoom arrière ...
Edit:
Comme vous l'avez noté, les frontières sont la principale chose qui cause la confusion. Ils peuvent être retirés des conteneurs extérieurs et mettre un conteneur imbriqué conçu pour ajouter des frontières.
http://jsfiddle.net/chrisvenus/pdqrq/6/
Ce qui précède est un violon (basé sur le vôtre) qui crée des balises div intérieures contenant la frontière pendant que les conteneurs flottés n'ont aucune frontière du tout. Cela semble maintenant suffisamment robuste pour travailler dans IE8, FF7.0.1 ou Chrome 14.0.835.202.
Les choses changées ont ajouté la DIV au HTML et échangent des classes autour de lui et de son parent. Il y avait une nouvelle classe InnerContainer qui définit la hauteur et la largeur à 100% pour s'assurer qu'elle remplit la boîte contenant (et donc les frontières sont là où elles sont recherchées. J'ai également changé la largeur de la boîte inférieure afin qu'elle soit alignée correctement.
Faites-moi savoir si cela vous fait.
La meilleure méthode pour le faire maintenant est " dimensionnement de la boîte: bordure ",
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }