Affichage Mac spécifique: problème inline-block

Question

J'ai un problème avec un mac spécifique qui n'affiche pas un certain site Web que j'ai construit correctement. Tous les autres mac et pc que j'ai testés affichent le site correctement, mais ce mac spécifique dans tous les navigateurs affiche incorrectement le problème que je reçois est en ligne les éléments du bloc ne sont pas côte à côte, j'ai tous les 'hacks' en place et comme mentionné, cela s'affiche correctement sur tous les autres ordinateurs.

Cette question est exactement le même problème mais il ne semble pas avoir été résolu.

https://discussions.apple.com/thread/6650689?start=0&tstart=0

Je sais que je pourrais essayer flotteurs, mais je trouverais plutôt la voie de cette cause, personne ne sait de quelque raison que cela pourrait se produire?

Answer 1

Si les rendus du navigateur ne varient que sur une ou plusieurs machines, les polices sont un coupable possible. Assurez-vous que tous les ordinateurs utilisent les mêmes polices pour rendre votre page, même si la même version de la police est utilisée. Un grand nombre de polices sont légèrement modifiées au fil du temps, le crénage (espace entre deux caractères) ou l'indication (comment les courbes qui décrivent les polices doivent être mappées sur les pixels de l'écran) peuvent changer, entraînant des différences mineures dans la largeur du texte consomme lors de l'affichage.

Si en effet la version de police est le coupable: Rappelez-vous que les visiteurs de votre page pourraient également avoir cette "mauvaise" version de la police. Il est donc conseillé d'essayer d'améliorer votre mise en page HTML.

J'ai souvent observé que laisser quelques pourcentages vides aidait à résoudre de tels problèmes de police. Par exemple: avoir un div (largeur = 100%) qui contient deux éléments dans chaque "rangée", le premier une étiquette d'environ 1/3 de la largeur, et le second étant un peu de contrôle, en prenant le reste de l'espace . Les avoir définis avec et width:67% résulte souvent dans le cas où la deuxième partie est disposée au-dessous de la première partie à la place l'une de l'autre. Changer les largeurs à quelque chose comme width:32% et width:65% résout souvent cela, car il permet des erreurs d'arrondi dans les navigateurs lors de la disposition des éléments.