1

http://www.amordetango.nl/txp/をご覧ください...MacではChromeは正常に動作しています。Firefoxはh1とh2を表示していません...！？

ここで少し助けが必要です！

h1とh2を中央に配置し、h2をh1の少し上に配置する必要があるため、3つの要素のコードはやや複雑です... 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);
}
4

1 に答える 1

1

Firefoxはz-indexを正しく解釈しているようです。問題は代わりにマージントップにあります：それらを見えなくしているh1とh2の-50％。

于 2012-06-09T19:15:35.377 に答える