在Firefox上的网格布局中为空的h1

Question

我正在尝试使用网格布局在firefox浏览器（v 63.0）和chrome（v 70.0.3538.77）的标题中显示我的elem，所有这些都正确显示，除了尽管单元格对于他来说足够大（我已经通过将其放置在网格之外并检查其大小来进行测试），但它仍然以某种方式保持为零（但仍可见，请参见屏幕截图以获取更多详细信息）。

这是html（以哈巴狗为准）

link(rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous")
link(rel="stylesheet" href="/style/header.css")

header
  h1 3615 MyBlog
  div.innerGrid
      h1 3615 MyBlog
      span.subline Node.js is cool!
      span.admin
          i.fas.fa-cog
          |Administration

和header.css

body{
    margin: 0;
}

header{
    width: 100vw;
    height: 100px;
}

.innerGrid{
    width: 90vw;
    height: 90%;
    display: grid;
    margin: auto;
    grid-template-columns: 200px auto 200px;
    grid-template-rows: 10px 40px 20px 20px auto;
    grid-template-areas:
            ". . ."
            "title . button"
            ". . ."
            "subline . ."
            ". . .";
}

.innerGrid h1{
    grid-area: title;
}

.innerGrid .subline{
    grid-area: subline;
}

.innerGrid .admin{
    grid-area: button;
}

.innerGrid {
  border: 1px solid black;
}

.innerGrid > * {
  border: 1px solid red;
}

正如您所看到的，子行和按钮的行为符合预期，但是网格外部的h1的大小为38.4px（在我的计算机上），但是网格中的h1的大小为0px（并且单元格的大小应为40px，明显优于38.4px）。

编辑：在CSS中添加屏幕截图和边框以显示问题

谢谢您的帮助。

Answer 1

问题很可能是由浏览器设置的默认边距h1引起的，因此其行为方式与您的跨度不一样。重置默认边距和填充是常见的做法，请参见this link。在您的情况下，您也可以简单地为该特定元素重置边距，如下所示：

OnEnter()