h1 标签小于 h2，都在一个 section 标签内 [英] h1 tag smaller than h2, all insde a section tag

问题描述

我的 h1 标签(位于 section 标签内)比 h2 标签小.h1 标签在 section 标签之外时是正确的大小.我一直在浏览我的 CSS 页面，但没有发现任何事情会导致这种情况发生.这是我的 CSS 页面:

My h1 tag, which is insode a section tag, is small than an h2 tag. The h1 tag was the correct size when out side the section tag. I keep looking through my CSS page and am finding nothing that would make this happen. Here is my CSS page:

body 
{
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #42413C;
    margin: 0;
    padding: 0;
    color: #000;
    background-image: url(images/mass_effect_1_citadel_dreamscene_by_droot1986-d5sw7hu.jpg);
}

a img 
{
    border: none;
}

.container 
{
    width: 960px;
    background-color: #192370;
    margin: 0 auto;
}

header 
{
    background-color: #050a2e;
}

.sidebar1 
{
    float: left;
    width: 175px;
    background-color: #2236d1;
    padding-bottom: 10px;
    border: solid thin black;
    text-align: center;
}

.content 
{
    padding: 10px 0;
    width: 780px;
    float: right;
    border: solid thin black;
}

footer 
{
    padding: 10px 0;
    background-color: #050a2e;
    position: relative;
    clear: both;
    text-align: center;
}

header, section, footer, aside, article, figure 
{
    display: block;
    color: white;
}

a:link
{
    text-decoration: none;
    color: #d1bd22;
    font-size: 1.3em;
}

a:visited
{
    text-decoration: none;
    color: white;
    font-size: 1.3em;
}

a:hover
{
    text-decoration: underline;
    color: #d1bd22;
    font-size: 1.3em;
}

a:active
{
    text-decoration: underline;
    color: white;
    font-size: 1.3em;
}

任何帮助将不胜感激

推荐答案

如果您在没有样式表的情况下测试情况，您将看到 h1 在 section 元素中以较小的字体显示.这是由浏览器样式表引起的，在支持 section 及其 建议呈现.section 元素有被定义为在其中，h1 元素是节的标题，因此相对于整个页面，它位于第 2 级(甚至位于如果嵌套了 section 元素，则为较低级别).

If you test the situation without your style sheet, you will see that h1 inside a section element appears in a smaller font. This is caused by a browser style sheet, in browsers that support section and its suggested rendering in HTML5. The section element has been defined so that within it, an h1 element is a heading for the section, so relative to the page as a whole, it is at the 2nd level (or even at a lower level, if section elements have been nested).

对于这种方法的充分性有各种不同的意见，但这就是 HTML5 草案所说的以及一些浏览器已经实现的.另一方面，旧浏览器会忽略这些规则，因此该方法实际上并不可靠.使用 h2 作为章节标题更安全(并且根据 HTML5 完全可以接受).

There are various opinions on the adequacy of that approach, but that’s what HTML5 drafts say and what some browsers have implemented. On the other hand, old browsers ignore such rules, so the approach is not practically robust. It is safer (and quite acceptable according to HTML5) to use h2 for section headings.

这篇关于h1 标签小于 h2，都在一个 section 标签内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！