h1 tag smaller than h2, all insde a section tag

问题

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;
}

Any help would be greatly appreciated

回答1:

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).

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.

来源：https://stackoverflow.com/questions/20642585/h1-tag-smaller-than-h2-all-insde-a-section-tag

标签

html

css