WebKit vs Mozilla alineación vertical de glifos en la caja
Esta imagen muestra cómo prueba muy diferentes posiciones de Safari texto dentro de una caja vs Firefox (5.0.5 Safari y Firefox 5.0.1 para Mac OS X 10.6 .7). Observe cómo la "S" para sans-serif se empalma hasta la parte superior de la caja en Firefox y no en Safari. La diferencia parece variar según el tipo de letra utilizado, donde algunos incluso se representan de forma consistente.
He leído people saying que esto es debido al redondeo cuestiones entre font-size y line-height (y fija mediante el establecimiento de menor altura que el tamaño), pero creo que eso es refutada por mi ejemplo, donde sans-serif/helvética en Firefox siempre se alinea la parte superior en el cuadro.
Para mí, parece que Safari lo hace más bien que Firefox, es decir, el texto es generalmente más en una línea media.
¿Hay alguna manera de hacerlos más consistentes? Mi objetivo solo son los navegadores compatibles con los estándares.
- NB1: Esto no tiene nada que ver con
vertical-align. - NB2: Investigué un similar problem in the past sin un resultado completamente satisfactorio.
Mi código de prueba: http://jsbin.com/omaboc
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
font-size: 50px;
line-height: 1em;
}
div {
background: #b5e260;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div style="font-family: sans-serif">Some text @ this box</div>
<div style="font-family: serif">Some text @ this box</div>
<div style="font-family: arial">Some text @ this box</div>
<div style="font-family: helvetica">Some text @ this box</div>
<div style="font-family: courier">Some text @ this box</div>
<div style="font-family: georgia">Some text @ this box</div>
</body>
</html>
El mismo problema no ocurre en Windows 7, mira: http://i.stack.imgur.com/xQmTe.gif – thirtydot
Emocionante . ¡La trama se complica! +1 para GIF-animación;) –
Echa un vistazo a la respuesta aceptada para este cachorro: http: // stackoverflow.com/questions/7155174/inconsistent-font-size-and-indentation-on-firefox-chrome – skybondsor