problema en Firefox vs cromo con el texto en negrita y bordes dobles

Question

que estoy trabajando en un sitio y tengo algunos problemas que espero que ustedes me puede ayudar con :)

1. Si pongo en mi negrita texto en el menú se ve demasiado audaz en Firefox: S, pero se ve bien en Chrome.

2. En Firefox, el borde doble del contenedor #content está fuera del efecto de sombreado: S, pero se ve bien en Chrome.

Screen shot en Mac Firefox 5.0.1 y Chrome 13.0.782.112:

This es mi proyecto.

Espero que alguien pueda ayudarme con esto.

Si usted tiene algo que será mejor que puedo hacer, estaré encantado de escuchar que también :)

Answer 1

Su primer número con respecto bold fuente de mirada diferente entre los navegadores es sólo a causa de la forma en que los navegadores renderizar texto de manera diferente. No hay nada que puedas hacer al respecto, a menos que tomes la horrible ruta de usar imágenes en su lugar.

Su segundo problema no se trata del border sino del outline. Se debe a la forma en que Firefox interpreta el outline cuando se aplica box-shadow. Lo aplica fuera de la sombra en su lugar.

usted puede poner el código de abajo en su css para apuntar Firefox y llevar el contorno de vuelta en:

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

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

Answer 2

@ 1: Existen diferencias en la representación de fuentes en todos los navegadores. Puede intentar valores numéricos en lugar de simplemente negrita para restringir los resultados (http://clagnut.com/blog/2228/). También leer la respuesta en este SO entrada: Same font except its weight seems different on different browsers

@ 2: eliminar esta línea de CSS #content:

outline: 1px solid #B9BDBE;