z-index는 Chrome에서 작동하지만 Firefox에서는 작동하지 않습니다 ...?

Question

http://www.amordetango.nl/txp/을보세요 ... Mac에서 Chrome은 정상적으로 작동합니다. Firefox가 h1과 h2를 표시하지 않습니다 ...!?

약간의 도움이 필요합니다!

h1과 h2가 가운데에 있어야하고 h2가 h1 위에 약간 있어야하기 때문에 세 요소의 코드가 다소 복잡합니다. Chrome을 보면 내 의미를 알 수 있습니다.

hgroup 
{ 
    position: relative; 
    text-align: center; /* to center h1 en h2 */ 
    z-index: 1; 
} 

h1 
{ 
    font-family: 'BebasNeueRegular', sans-serif; 
    color: #fff; 
    line-height: 100%; 
    font-weight: normal; 
    text-transform: uppercase; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    height: 100%; 
    margin-top: -50%; /* half the height */ 
    margin-left: -50%; /* half the width */ 
    z-index: 2; 
    letter-spacing: 0.15em; 
    padding-left: 0.15em; /* to compensate letter-spacing h1 */ 
} 

h2 
{ 
    font-family: 'MutluOrnamental', sans-serif; 
    line-height: 100%; 
    font-weight: normal; 
    color: #b7b7b7; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 100%; 
    height: 100%; 
    margin-top: -50%; /* half the height */ 
    margin-left: -50%; /* half the width */  
    z-index: 3; 
    padding-top: 10px; /* !important > to make h2 fit in relation to h1 */ 
} 

/* for all browser including all IE! */ 
h2 { 
    opacity: 0.75; 
    zoom: 1; 
    filter: alpha(opacity=75); 
} 

Answer 1

Firefox가 z- 색인을 올바르게 해석하고있는 것으로 보입니다. 이 문제는 대신 margin-top : h1과 -h2에서 -50 %로 보이지 않게 이동합니다.