Je cherche une réponse pour cela pendant une heure sans chance.
Je crée un texte de centrage verticalement à l'intérieur de la boîte à l'aide de la propriété "Hauteur de ligne" CSS. Cela fonctionne bien avec des polices sécuritaires standard et fonctionne également bien pour "" @ Font-face "" Police enrobage sous Windows. P>
sur le MAC Toutefois, il y a un problème avec ce centrage en utilisant "@ font-face". Voir: http://cl.ly/qble/o p>
i Don ' t sais quoi faire avec ça. Le seul moyen de résoudre ce problème pour utiliser une hauteur de ligne différente pour Mac. Mais autant que je sache que cela ne soit possible, il n'est pas possible sans la programmation de JavaScript ou du serveur et ne semble pas être la solution appropriée pour moi. P>
exemple (boîte bleue en haut): P>
#header .login {
text-decoration:none;
margin:11px 9px 0 9px;
float:right;
font-size:11px;
color:#fff;
background:url(../img/header-login.png);
width:118px;
height:26px;
line-height:26px;
padding:0 0 0 10px;
text-transform:uppercase;
font-family: 'Helvetica55', Sans-Serif;
}
6 Réponses :
Au lieu d'utiliser différentes hauteurs de ligne, essayez d'utiliser la propriété du w3c :
Dans les situations où les polices de police se produisent, les polices de repli peuvent ne pas partager le même rapport d'aspect que la famille de polices souhaitée et apparaîtront donc moins lisibles. La propriété de réglage de la taille de la forme de police est un moyen de préserver la lisibilité du texte lorsque la police se produit. Cela le fait en ajustant la taille de la police de sorte que la hauteur X soit la même quelle que soit la police utilisée.
Taille-Taille-Taille-Taille avec une valeur de auto .
Actuellement supporté par Firefox: développeur.mozilla. Org / fr-US / Docs / Web / CSS / ...
Tout d'abord, essayez de définir la hauteur de la ligne de PX à EM.
Si cela ne fonctionne pas, cela pourrait être causé par des styles par défaut différents pour chaque navigateur. Ces styles par défaut pourraient jouer avec vos styles. Essayez donc d'utiliser une RESET.CSS dans votre page.
Le problème est probablement probablement dans la police d'occasion. Chaque police a ses propres métriques et lorsqu'elle n'est pas optimisée correctement, elles peuvent différer d'une plate-forme à une autre. Voir http: //blog.typeekit .COM / 2010/07/14 / métrique-métrique-et-vertical-space-in-CSS / pour une meilleure explication de cela.
Vous pouvez essayer de modifier vous-même la police à l'aide d'un outil tel que http://fontforge.org/ . Ce n'est pas facile cependant et prend un essai et une erreur pour le faire correctement. Cela peut également violer la licence de la police que vous utilisez.
Mon conseil: Choisissez une police meilleure optimisée pour une utilisation sur le Web. Prenez n'importe quelle police de typeKit ou similaire et je parie que vous obtenez des résultats plus cohérents.
Peut-être 'vertical-alignement: "peut aider,
Veuillez vérifier ce violon
Cela expliquera la différence, je pense que chaque navigateur a une valeur par défaut différente,
Ici, j'ai créé 4 balises de span différentes pour afficher la valeur supérieure, moyenne, inférieure et par défaut (non attribue) de la valeur alignée verticale,
Veuillez changer de valeurs si cela aide,
Comme vous utilisez des images dans le bouton, veuillez vérifier que l'image est définie avec 0 0.
I.e Cela rendra l'image à partir du sommet de 0 gauche et 0 qui vous aidera à IDNetify si et l'image n'est pas générée correctement.
Veuillez répondre si problème non résolu .. arrière-plan: URL (../ img / en-tête-login.png) NON-REPEAT 0 0;
de mon expérience pour les sites Web multi-navigateurs et multi-plateformes, vous devez vraiment laisser tomber les pixels dans les polices et commencer à utiliser EMS.
Voici un outil de table de conversion utile:
laissez-moi savoir s'il arrive toujours en utilisant em. N'oubliez pas que différentes polices ont des comportements différents et la taille par défaut (base) peut également différer. Si vous souhaitez vous assurer qu'il s'agit exactement de la même taille, l'appart d'utiliser 'em' vous devez également utiliser une police openType et l'incliner dans votre CSS, ayant exactement la même police et la même taille dans n'importe quel écran ou navigateur.
Les systèmes d'exploitation peuvent rendre les polices différentes manières. On peut commencer à partir du bas et d'autres peuvent commencer de haut comme algorithme différent. Si le problème était CSS, il ne serait pas résolu par un autre type de police.
J'ai trouvé une autre question similiaire à votre unique, vous pouvez vérifier si cela fonctionne pour votre situation: Mac vs. Windows Windows Browser Height Rendu Demi de rendu
J'ai le même problème, j'ai besoin d'aide à ce sujet.
Avez-vous envisagé d'utiliser l'une des autres méthodes de texte centralisé verticalement? Doit-il être centré sur la hauteur de la ligne?