Problemas de tamaño de fuente que comparan Chrome y Firefox

Creé un sitio y el problema es que Chrome muestra font-size 1px más grande que Firefox. Probé varias formas de hacer coincidir el tamaño de fuente, lo especifiqué en px, en% establecí el cuerpo en 100% y luego los elementos en 0.875em. Ninguno de esos funciona. Todavía muestra 1 píxel mayor en cromo.Problemas de tamaño de fuente que comparan Chrome y Firefox

Este es el código que estoy usando para tamaños de fuente:

body { 
    font-size: 100%; 
} 
* { 
    margin:0; 
    padding:0; 
    text-decoration: none; 
    font-family:helvetica, arial, sans-serif; 
} 
#geral { 
    width:1000px; 
    margin:0 auto; 
    position:relative; 
    font-size:0.875em; 
}

Cuando el #geral envuelve todo el sitio y no hay otra declaración de tamaño de fuente en la CSS, la fuente se puede ver en el enlace que publiqué

Me pregunto si hay una manera de arreglar eso o si tendré que especificar diferentes tamaños de fuente para cada navegador?

Fuente

2011-02-04 Iberê

le sugiero que utilice un CSS reset como el de YUI. Esto hará que sus páginas mucho más consistente a través de todos los navegadores, incluyendo la representación de fuentes. Esto hace que la mayor diferencia con IE y los otros navegadores, pero . se deshace de todo tipo de inconsistencias

Fuente

2011-02-04 15:44:16

Esto es esencial. Todos deberían usar esto todo el tiempo. –

+15

Cambiará tu vida, hombre. Como encontrar FireBug, aprender jQuery o comer nachos por primera vez. –

Esto es realmente útil, pero, incluso después de agregar este restablecimiento de CSS, aún se muestra más grande. Creo que iré con php useragent para establecer las fuentes del mismo tamaño en cada navegador. –

em es escalable y px no lo es. Configure la fuente en un tamaño definido de px y debería estar bien. em puede ser conveniente en ciertas circunstancias, pero si le preocupa 1px, entonces debe establecer tamaños de píxeles estrictos.

EDITAR: Solo vuelva a leer y veo que ya ha intentado establecer la altura como píxeles. No tengo ni idea, ya que no tengo Chrome instalado aquí para probar. :(

Fuente

2011-02-04 15:41:55 anothershrubery

funciona bien aquí:

Chrome 9.0: enter image description here

Firefox 4.0 beta 10: enter image description here

Fuente

2011-02-04 21:21:07

Sí, lo arreglé ahora, usé algunos js para detectar cromo y compensar ese 1px. –

Puede publicar una respuesta a su propia pregunta y marcarla como respondida también ... –

Yo también he tenido este problema y he decidido, donde sea posible ir con el tamaño de fuente: pequeño (o x-pequeño, etc.). Esto le proporciona una gama básica de tamaños de fuente escalables sin tener que buscar css fílmente o jugar con JS. Funciona con IE, FF y Chrome.

Fuente

2012-02-03 23:02:15 aSystemOverload

si tiene página Web para imprimir a continuación

add css

<link rel="stylesheet" type="text/css" href="report.css" media="print" />

en el archivo css

body { 
    padding: 3px; 
    margin: 0.5px; 
    background-position: center; 
    color: #000000; 
    background: #ffffff; 
    font-family: Arial; 
    font-size: 13pt; 
}

esto funciona para mí

Fuente

2012-07-09 06:09:36

Fwiw en esta fecha, yo mismo Acabo de enterarme de que una buena práctica de codificación CSS es definir el tamaño absoluto de letra solo para HTML o BOD Elemento Y, y definir todos los demás tamaños de fuente relativamente, es decir, en términos de este tamaño (es decir, usando em o %).

Si lo hace, solo necesita navegadores webkit (Chrome, Safari) de los demás (Gecko, IE, etc.).Así, por ejemplo, es posible que haya definido en la hoja de estilos,

body { 
    font-size: 16px; 
}

A continuación, en la parte inferior de la hoja de estilo, puede incluir esta

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    Body { 
    font-size: 20px;  
    } 
}

(Ver también Chrome conditional comments)

Estos trabajos para mi. Pero un efecto colateral es reescalar también los elementos que no son de texto que tienen un tamaño relativo, y esto puede o no ser deseable.

Fuente

2012-09-25 12:49:45 JohnK

<script> 

    if(navigator.userAgent.indexOf("Chrome") != -1) 
    { 
     var fontsize = "<style>body{font-size: 125%;}</style>"; 
    } 
    else if(navigator.userAgent.indexOf("Opera") != -1) 
    { 
     var fontsize = "<style>body{font-size: 100%;}</style>"; 
    } 
    else if(navigator.userAgent.indexOf("Firefox") != -1) 
    { 
     var fontsize = "<style>body{font-size: 100%;}</style>"; 
    } 
    else if((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10 
    { 
     var fontsize = "<style>body {font-size: 100%;}</style>"; 
    } 
    else 
    { 
     var fontsize = "<style>body {font-size: 100%;}</style>"; 
    } 
    </script> 

<script>document.writeln(fontsize);</script>

Fuente

2015-05-06 19:25:19

Problemas de tamaño de fuente que comparan Chrome y Firefox

Respuesta

Cuestiones relacionadas