Firefox texto 1px más bajo que cromo y es decir

Esto me está volviendo loco. El texto de Firefox es 1px más bajo que en Chrome y es decir. No es un problema de margen o relleno en html o body, lo intenté. No parece ser un problema de redondeo tampoco. Aquí está una imagen:Firefox texto 1px más bajo que cromo y es decir

enter image description here

primero "Hola" es Firefox 13, Segunda "Hola" es IE9 y "Hello World" es Chrome.

Aquí está el código (bastante simple):

<!DOCTYPE html> 
<html lang="en-us"> 
    <head> 
     <meta charset="utf-8"> 
     <!-- Always force latest IE rendering engine and chrome frame --> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>Pixel Bug?</title> 
    <style type="text/css"> 
     html{ 
      font-size: 100%; 
     } 
     body{ 
      font-size: 1em; 
      line-height: 1.5; 
      background: white url('images/grid16.png') -4px -6px; 
     } 
     p{ 
      margin: 1.5em 0; 
     } 
    </style> 
</head> 
<body> 
    <p>Hello World!</p> 
    <p>Hello World 2!</p> 
</body> 
</html>

¿Es sólo un error? ¿Que esta pasando aqui? No quiero que Firefox funcione, solo quiero entender por qué sucede esto.

EDIT:

Sobre la investigación adicional que parece que hay un error de representación, pero todavía me confunde. Por ejemplo, la altura del texto debe ser de 24px. Lo cual no debería causar errores de redondeo que podrían causar esto. Sin embargo, si cambio la altura de la línea a 23px explícitamente, se alinea. No tengo ni idea de porqué.

EDIT2: Posible razón? https://bugzilla.mozilla.org/show_bug.cgi?id=442139

EDIT3: Se alinea usando una fuente de 20px y una altura de línea de 40px. Me hace pensar que esto es solo un error. Se chupa causa 16/24 es bastante estándar:/

Fuente

2012-06-13 Peach Passion

se puede crear un jsFiddle ?? –

Tuve este problema con una fuente de tipo de letra y solo pude solucionar esto simplemente configurando el tamaño de fuente más pequeño en safari (era solo un error de safari).solución sucia, pero hizo feliz al cliente – Sliq

Es probable que las diferentes técnicas de suavizado de fuentes utilizadas por los diversos navegadores/sistemas operativos. Intentar hacer coincidir un nivel de píxel es una misión tonta. – steveax

Véase mi respuesta anterior aquí :: CSS white-space and list-style-image do not stack in Firefox 11+

No está utilizando reset.css problemas, creando así

Here you can find many links for the reset.css razón para usar reset.css Esto se debe a que hará que todos los css del agente de usuario (navegador) se ajusten a una configuración base, de modo que no se vean diferentes en los diferentes navegadores.

Editar :: Como el OP utilizó el reset.css. No puedo reproducir el problema. Por lo tanto, las otras razones podrían ser

Problema de representación de la fuente de diferentes motor broser. No particuar fix Read more
Problema con el hardware. Joel talks about it in his blog.

Además, estoy de acuerdo con lo que @steveax dijo.

Editar 2 :: Si quieres profundizar en ello.

Elevar un error
Try tuning your browser yourself

Fuente

2012-06-13 18:26:46

Restablecer no es el problema. –

@PeachPassion ¿ha intentado menos? – MacMac

@Buscando el Codeigniter Sí, lo tengo. Al realizar una búsqueda más profunda, parece ser un error de renderizado, pero aún así me confunde. Por ejemplo, la altura del texto debe ser de 24px. Lo cual no debería causar errores de redondeo que podrían causar esto. Sin embargo, si cambio la altura de la línea a 23px explícitamente, se alinea. No tengo ni idea de porqué. –

Firefox texto 1px más bajo que cromo y es decir

Respuesta

Cuestiones relacionadas