Problème de compatibilité sur les navigateurs Mac

Question

Je suis en train de concevoir un petit site Web (you can see it here), mais je commence à avoir des conflits avec les navigateurs Web basés sur Mac. Il semble apparaître sur tous les navigateurs Mac et non sur les navigateurs PC. J'ai testé sur Safari et Firefox sur Mac et Firefox/Internet Explorer sur PC.

L'image de gauche provient d'un PC, celle de droite provient d'un Mac. Comme vous pouvez le voir, un espace d'un pixel est placé sous le menu. Le menu devrait être aligné sur le contenu principal.

Pourquoi est-il fait cela? J'ai essayé tout ce que je peux penser sans succès.

Answer 1

Essayez de définir la hauteur de ligne de la liste dans le menu sur 16px.

#menu ul { 
line-height: 16px; 
} 

Answer 2

C'est assez simple. Vous style votre <div id="menu"> pour être 50px grand. Mais la hauteur du <ul> à l'intérieur dépend des métriques de polices, tout comme les hauteurs de ses enfants (qui ont les arrière-plans). Donc, en fonction des polices exactes utilisées et de l'algorithme exact de rastérisation des polices, la hauteur variera. En même temps, vous ajoutez une marge supérieure qui essaie de faire coïncider les cases avec la case ci-dessous ... mais la taille de cette marge doit dépendre du dimensionnement exact du texte.

Vous avez plusieurs options. Vous pouvez passer à la hauteur automatique dans le menu et arrêter d'utiliser les flotteurs pour disposer les choses les unes à côté des autres; utilisez display:inline-block à la place. Vous pouvez passer à la hauteur automatique dans le menu et utiliser un clearfix pour vous assurer que le menu est assez grand pour contenir les flotteurs. Vous pouvez explicitement définir plus de hauteurs et de hauteurs de ligne pour vous assurer que les choses s'additionneront quelle que soit la police (mais cela va terriblement casser pour certains utilisateurs, votre taille 50px ne fonctionnera pas pour un utilisateur qui utilise une police 60px parce qu'ils ne voient pas très bien).