2011-10-21 11 views
9

Una cosa extraña que he notado al intentar normalizar mi CSS en navegadores es que las propiedades de altura de línea para elementos h y otros tipos de etiquetas principales son diferentes en navegadores como Chrome y Firefox y aún no está ajustada al nivel de agente de usuario:Encontrar/establecer css valores predeterminados de altura de línea

por otra parte, normalizadores populares como normalize.css no toman el cuidado de eso tampoco.

Así que mi pregunta es dos partes:

  1. Si alineaciones alturas no se fijan en el nivel de agente de usuario, donde se los valores por defecto viene?
  2. Prefiero no normalizar las alturas de línea, pero si tengo que hacerlo, ¿dónde está un buen ejemplo de algunos valores predeterminados?
+2

Consulte [aquí] (http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/) y [aquí] (http://dowebsitesneedtolookexactlythesameineverybrowser.com/). –

+4

@ Truth- No es útil. Si intentas decir que la coherencia entre navegadores no es importante, esa no es una opinión que compartan la mayoría de los diseñadores web. De cualquier manera, no aborda la pregunta. – Yarin

+1

@Yarin - La verdad puede doler a veces :) – easwee

Respuesta

21

Estoy de acuerdo en que "las cosas no son exactamente iguales" es una especie de excusa, especialmente porque incluso IE acepta una buena adopción de estándares.

Los valores relativos de altura de línea (120%, 1, 1em) se basan en el tamaño de fuente calculado. Se supone que Normal se basa en el tamaño de fuente pero puede variar de un navegador a otro, como puede ver mediante la apertura de este ejemplo en Chrome FF y: http://jsfiddle.net/mahalie/BSMZe/6/

por lo general se ven a HTML5 Boilerplate para las colas en las mejores prácticas, ya que es tan popular (y, por tanto, bien examinada/bajo mucho escrutinio utilizan:.

body { margin: 0; font-size: 13px; line-height: 1.231; } 

Y su discusión es bastante interesante, aunque no hay perspectiva clara ganadora: https://github.com/h5bp/html5-boilerplate/issues/724

+1

@ mahalie- ¡Gracias por dar un paso al frente y dar una respuesta real! Grandes enlaces +2 – Yarin

+4

El enlace ahora debería ser https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css –

+0

Esto está desactualizado ya que claramente están usando un enfoque diferente (y más accesible) en este momento dejando que el navegador use sus valores predeterminados. –

Cuestiones relacionadas