problema in Firefox vs cromato con testo in grassetto e doppie confini

Question

sto lavorando su un sito e ho alcuni problemi che spero voi ragazzi mi può aiutare con :)

1. Se metto in grassetto sul mio testo nel menu sembra troppo audace in Firefox: S, ma sembra a posto in Chrome.

2. In Firefox il doppio bordo sul contenitore #content si trova all'esterno dell'effetto ombra: S, ma ha un bell'aspetto in Chrome.

Screen shot su Mac Firefox 5.0.1 e Chrome 13.0.782.112:

This è il mio progetto.

Spero che qualcuno possa aiutarmi con questo.

Se hai qualcosa di meglio che posso fare, sarò lieto di sentire che anche :)

Answer 1

Il tuo primo problema per quanto riguarda carattere bold cercando diversa tra il browser è solo a causa del modo in cui i browser renderà il testo in modo diverso. Non c'è nulla che tu possa fare a riguardo, a meno che tu non usi l'orribile modo di usare le immagini.

Il tuo secondo problema non riguarda lo border ma piuttosto lo outline. È causato dal modo in cui Firefox interpreta lo outline quando viene applicato box-shadow. Lo applica al di fuori dell'ombra.

È possibile inserire il codice qui sotto nella tua css per indirizzare Firefox e portare il contorno di nuovo in:

@-moz-document url-prefix() { 
    #content{ 
     outline-offset: -11px; 
    } 
} 

vivo esempio: http://jsfiddle.net/tw16/n8bet/

Answer 2

@ 1: Non ci differenze di rendering dei font in tutti i browser. Puoi provare valori numerici anziché semplicemente in grassetto per restringere i risultati (http://clagnut.com/blog/2228/). Anche leggere la risposta su questo SO entrata: Same font except its weight seems different on different browsers

@ 2: rimuovere questa riga dal #content css:

outline: 1px solid #B9BDBE;