Solución:
Dado que no ha especificado ningún estilo, el tamaño de los encabezados está determinado por la hoja de estilo predeterminada de su navegador. En particular, esto significa que el tamaño relativo de los dos encabezados puede variar según el navegador del espectador.
Al mirar su violín en Chrome 33, veo el efecto que describe. Al hacer clic con el botón derecho en los títulos y seleccionar “Inspeccionar elemento”, se revela que el problema se debe a la presencia del <article> y / o <section> etiquetas alrededor de los títulos.
En particular, la hoja de estilo predeterminada de Chrome normalmente incluye las reglas:
h1 { font-size: 2em }
y:
h2 { font-size: 1.5em }
Sin embargo, la regla anterior se anula dentro <article> y / o <section> etiquetas según algunas reglas más específicas, presumiblemente diseñadas para hacer que los encabezados de sección sean más pequeños que los encabezados normales de “página completa”:
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
}
:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.17em;
}
El no estándar :-webkit-any(...) selector presumiblemente solo coincide con cualquiera de las etiquetas enumeradas entre paréntesis. El efecto es que cualquier <h1> encabezados dentro de un <article>, <aside>, <nav> o <section> Las etiquetas se reducen al tamaño de una etiqueta normal. <h2> encabezado, y cualquier <h1> dentro dos tales etiquetas se encogen aún más, presumiblemente al tamaño de un normal <h3> más o menos.
Fundamentalmente, la hoja de estilo predeterminada de Chrome no tener tales reglas especiales para <h2> etiquetas, por lo que siempre (en Chrome 33, de todos modos) se mostrarán con el mismo tamaño. Por lo tanto, cuando está rodeado por dos o más <article> y / o <section> etiquetas, <h1> se vuelve más pequeño que <h2>.
Si no especifica ningún estilo, su navegador elegirá su estilo predeterminado. En el primer ejemplo, h1 y h2 están dentro de un encabezado en una sección, mientras que en el segundo caso están en la raíz. Entonces es admisible que el comportamiento sea diferente.
Esto es parte de la especificación HTML5 para secciones y encabezados:
En el siguiente bloque CSS, X es la abreviatura del siguiente selector:
:matches(article, aside, nav, section)x h1 { margin-block-start: 0.83em; margin-block-end: 0.83em; font-size: 1.50em; } x x h1 { margin-block-start: 1.00em; margin-block-end: 1.00em; font-size: 1.17em; } x x x h1 { margin-block-start: 1.33em; margin-block-end: 1.33em; font-size: 1.00em; } x x x x h1 { margin-block-start: 1.67em; margin-block-end: 1.67em; font-size: 0.83em; } x x x x x h1 { margin-block-start: 2.33em; margin-block-end: 2.33em; font-size: 0.67em; }
Curiosamente, no existen tales reglas para h2 – h6.