css - H1上的width = 100％是否会在 Canvas 上引起多余的页边距……？

我正在Mac上使用Chrome / Firefox。请查看this page。

有一个水平滚动条，因此右侧有额外的边距。在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);
}

最佳答案

我刚刚在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;
}

我已经删除了-50％的居中方法，以使该块不会脱离页面（导致问题），并放回text-align：center。我还必须删除此行：

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

但是在我看来，这在视觉上不会造成任何问题。

提姆

关于css - H1上的width = 100％是否会在 Canvas 上引起多余的页边距……？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10976323/