Вложенные идентификаторы CSS будут работать в Firefox, но не в IE8?

Question

У меня html вложен примерно так

<div id="content">
    <div id="asection">
        <h1>Some Text</h1>
    </div>
</div>

Со свойствами css следующим образом

h1 {
color:#873C62;
font-size:32px;
line-height:26px;
}

#asection {
width:430px;
height:100%;
color:#666666;
font-size:12px;
line-height:17px;
}

#content {
width:968px;
clear:both;
padding:30px;
height:1%; overflow:hidden; 
}

Отображается так, как задумано во всех браузерах, кроме Internet Explorer 7/8

Я до сих пор изучаю совместимость с CSS и браузерами, поэтому любые дополнительные взгляды / опыт очень ценятся.Спасибо!

РЕДАКТИРОВАТЬ: я сделал свойство

#asection .h1 {} 

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

Answer 1

нет необходимости в ., просто поставьте пробел перед h1, точка указывает на класс, и если у вас нет класса с именем h1 т.е. class="h1", то это не будет работать как

, поэтому, если вы пытаетесь нацелиться на h1 в пределах #asection, вот код:

#asection h1 {} 

Answer 2

#asection .h1 {}

Точка до h1 указывает класс с именем "h1", а не элемент.Чтобы указать элемент h1, просто укажите его как есть.

Это должно работать одинаково как в Firefox, так и в IE8;в этом отношении не должно быть никакой разницы.