Почему H2 больше, чем H1?

Question

Почему H2 больше, чем H1?

в следующем фрагменте кода, почему содержание H2 больше, чем содержание H1?

<article>

    <section>

    <header>

        <h1>First Header</h1>

    </header>

    </section>

    <section>

    <header>

        <h2>Second Header</h2>

    </header>

    </section>

</article>

http://jsfiddle.net/abugp/

почему содержание H1 больше в приведенном ниже фрагменте, но не выше?

<h1>First Line</h1>

<h2>Second Line</h2>

http://jsfiddle.net/59T43/

808 3

html html5

3 ответов:

Comments

Ничего не найдено.

Ilmari Karonen · Accepted Answer · 2014-04-06 22:17:22

поскольку вы не указали никаких стилей, размер заголовков определяется таблицей стилей по умолчанию Вашего браузера. В частности, это означает, что относительный размер двух заголовков может варьироваться в зависимости от браузера зрителя.

глядя на вашу скрипку в Chrome 33, я вижу эффект, который вы описываете. Щелчок правой кнопкой мыши по заголовкам и выбор "проверить элемент" показывает, что проблема вызвана наличием <article> и/или <section> теги вокруг заголовки.

в частности, таблица стилей Chrome по умолчанию обычно включает в себя правила:
h1 { font-size: 2em }
и:
h2 { font-size: 1.5em }
однако, первое правило переопределено внутри <article> и/или <section> теги по некоторым более конкретным правилам, предположительно предназначенные для того, чтобы заголовки разделов были меньше обычных заголовков "полной страницы":
:-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;
}
нестандартное :-webkit-any(...) селектор предположительно просто соответствует любому из тегов, перечисленных в скобках. Этот эффект таков, что любой <h1> заголовки внутри <article>,<aside>,<nav> или <section> теги уменьшаются до размера обычного <h2> заголовок и каких-либо <h1> внутри два такие теги сжимаются дальше вниз, предположительно до размера нормального <h3> или так.

принципиально, таблица стилей Chrome по умолчанию не есть такие специальные правила в отношении <h2> теги, поэтому они всегда (в Chrome 33, во всяком случае) будут отображаться в том же размере. Таким образом, когда в окружении двух или более <article> и/или <section> теги <h1> будет меньше, чем <h2>.

Benio · Accepted Answer · 2014-04-06 22:15:59

Это из-за требований к стилю документации. Вы можете найти подробную информацию на HTML 5.1 documentation @ 10.3.7 разделы и заголовки

daniele · Accepted Answer · 2014-04-07 12:56:06

Если вы не укажете какой-либо стиль, Ваш браузер выберет свой стиль по умолчанию. В первом примере h1 и h2 находятся внутри заголовка в разделе, а во втором случае они находятся в корне. Тогда допустимо, что поведение отличается.