0

MacでChrome/Firefoxを使用しています。このページをご覧ください。

水平スクロールバーがあるので、右側に余分なマージンがあります。Stackoverflowをスニッフィングすると、H1（H2）のwidth = 100％と関係があることがわかりました...スキップすると余分なマージンがなくなるためです... :) ...しかし、H1は左側にあり、私が欲しいものではありません...:(

header 
{
    background-color: #73020c;
    padding-bottom: 110px; /* to push .banner down */
}

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

2 に答える 2

1

これをSafariでテストしました（これもWebキットに基づいているため、同じ問題が発生します）。

私はそれを次のように修正しました：

h1 
{
    font-family: 'BebasNeueRegular', sans-serif;
    color: #fff;
    line-height: 100%;
    font-weight: normal;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    height: 100%;
    z-index: 2;
    letter-spacing: 0.15em;
    text-align: center;
}

ブロックがページから押し出されて（問題の原因となる）、text-align：centerに戻らないように、-50％の中央揃え方法を削除しました。私もこの行を削除する必要がありました：

padding-left: 0.15em; /* to compensate letter-spacing h1 */

しかし、視覚的には、それは問題を引き起こしません。

ティム

于 2012-06-11T08:17:49.653 に答える
0

したがって、H1 は次のように拡張する必要がありますbox-sizing。

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-left: -50%; /* half the width */
    z-index: 2;
    letter-spacing: 0.15em;
    padding-left: 0.15em; /* to compensate letter-spacing h1 */
    -webkit-box-sizing: border-box; /* content-box */
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

...そしてポリフィルもあります... :)

于 2012-06-11T08:55:00.093 に答える