Problemi relativi alle dimensioni dei font che confrontano Chrome e Firefox

Question

Ho costruito un sito e il problema è che il display cromato font-size 1px è più grande di Firefox. Ho provato diversi modi per abbinare la dimensione del font, specificata in px, in% impostare il corpo al 100% e quindi gli elementi a 0.875em. Nessuno di quei lavori. Mostra ancora 1 pixel in più in chrome.

Questo è il codice che sto utilizzando per font-dimensioni:

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

Qualora il #geral avvolge l'intero sito e non v'è alcuna altra dichiarazione font-size sul CSS, la fonte può essere visualizzato nel link che ho postato.

Mi chiedo se c'è un modo per risolverlo o se dovrò specificare diverse dimensioni dei caratteri per ogni browser?

Answer 1

vi consiglio di utilizzare un CSS reset come quello da YUI. Farà le pagine molto più coerente in tutti i browser, incluso il rendering dei font. Si fa la differenza più grande con IE e gli altri browser, ma . si libera di tutti i tipi di incongruenze

Answer 2

em è scalabile e px no. Imposta il carattere su una dimensione definita px e dovresti essere ok. em può essere desiderabile in alcune circostanze, ma se sei preoccupato per 1px, allora dovresti impostare le rigide dimensioni dei pixel.

MODIFICA: basta rileggere e vedo che hai provato a impostare l'altezza come pixel già. Non ho idea di come non ho Chrome installato qui per testare. :(

Answer 3

funziona bene qui:

Chrome 9.0:

Firefox 4.0 beta 10:

Answer 4

Anche io ho avuto questo problema e ho deciso, dove possibile, di andare con font-size: small (o x-small etc). Questo ti dà una gamma di base di dimensioni di font scalabili senza dover cercare css o fare scherzi con JS. Funziona con IE, FF e Chrome.

Answer 5

se avete la pagina web da stampare poi

add css

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

nel file css

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

questo funziona per me

Answer 6

FWIW a tale data, io stesso ho appena appreso che una buona pratica di codifica CSS consiste nel definire la dimensione assoluta del carattere solo per l'HTML o il BOD Elemento Y e per definire relativamente tutte le altre dimensioni dei caratteri, ovvero in termini di dimensioni (ad esempio, utilizzando em o %).

Se si esegue questa operazione, è necessario disporre di browser Webkit (Chrome, Safari) singoli dagli altri (Gecko, IE, ecc.).Così, per esempio, si potrebbe avere definito nel foglio di stile,

body { 
    font-size: 16px; 
} 

Poi in fondo del foglio di stile, è possibile includere questo

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

(Vedere anche Chrome conditional comments)

questo funziona per me. Ma un effetto collaterale consiste nel ridimensionare relativamente tutti gli elementi non testuali che sono dimensionati relativamente, e questo può o non può essere desiderabile.

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>