WebKit vs Mozilla alineación vertical de glifos de fuente en el cuadro
Esta imagen de prueba muestra la forma en que Safari coloca texto dentro de un cuadro frente a Firefox (Safari 5.0.5 y Firefox 5.0.1 para Mac OS X 10.6.7). Observe cómo la "S" parasans-serif está en 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 constantemente.
He leídopersonas diciendo que esto se debe a problemas de redondeo entrefont-size yline-height (y se solucionó estableciendo una altura menor que el tamaño), pero creo que eso es refutado por mi ejemplo donde sans-serif / helvetica en Firefox siempre se alinea en la parte superior del cuadro.
ara mí, parece que Safari lo hace más bien que Firefox, es decir, el texto generalmente está más alrededor de una línea media.
¿Hay una buena manera de hacerlos más consistentes? Mi objetivo son solo los navegadores que cumplen con los estándares.
NB1: Esto no tiene nada que ver convertical-align. NB2: investigué un problema similar en el pasado sin resultados completamente satisfactorios.Mi código de prueba:http: //jsbin.com/omabo
<!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>