style - negrita css

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

Question

Construí 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.

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

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;
}

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

Me pregunto si hay una forma de solucionarlo o si tendré que especificar diferentes tamaños de letra para cada navegador.

Answer 1

Funciona bien aquí:

Chrome 9.0:

Firefox 4.0 beta 10:

Answer 2

Hasta ahora, recientemente descubrí que una buena práctica de codificación CSS es definir el tamaño absoluto de letra solo para el elemento HTML o BODY, y definir todos los demás tamaños de letra relativamente, es decir, en términos de este tamaño (es decir, usando em o % ).

Si lo hace, solo necesita navegadores webkit únicos (Chrome, Safari) de los demás (Gecko, IE, etc.). Entonces, por ejemplo, es posible que haya definido en su hoja de estilo,

body {
  font-size: 16px;
}

Luego, en la parte inferior de la hoja de estilo, puede incluir esto

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

(Ver también comentarios condicionales de Chrome )

Esto funciona para mí 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.

Answer 3

Sugiero que uses un restablecimiento de CSS como el de YUI. Hará que sus páginas sean mucho más consistentes en todos los navegadores, incluida la representación de fuentes. Hace la mayor diferencia con IE y los otros navegadores, pero elimina todo tipo de inconsistencias.

Answer 4

Yo también he tenido este problema y he decidido, siempre que sea posible, usar 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.

Answer 5

si tiene una página web para imprimir, entonces

agregar 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í

Answer 6

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

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

Answer 7

<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>