跨浏览器的标头CSS不一致

时间：2016-09-13 19:21:18

标签： html css

我的网站标题在Firefox和Chrome中的呈现方式不同，即使CSS是相同的。具体来说，这是它出现的方式：

enter image description here

即。 Firefox中的标题在顶部有一些额外的填充，我还没打算。额外填充中的设计是身体中的背景图像。我根本没有在标题上设置任何额外的余量。我标题的CSS代码是：

.header h1 {
    font-size: 25px;
    padding-top: 5px;
    color: white;
    width: 100%;
    text-align: center;
    padding-bottom: 0px;
    margin-bottom: -2px;
    letter-spacing: 1px;
    font-family: helvetica;
}

在HTML中，我只是：

<body>
<div class="header">
<h1> Fast Internet </h1>

1 个答案:

答案 0 :(得分：2)

margin collapsing生效了{{3}}。将margin-top:0;添加到您的h1规则：

.header h1 {
  margin-top:0;
  ...
}

默认情况下h1有margin-top/bottom:1em左右，并且margin-top会传播到其容器的margin-top（<div.header>这里）。

相关问题
最新问题