为什么Firefox上的填充/边距比Safari更小，即使使用重置css？

Question

我正在开发一个网站，即使我的css中包含重置css，Firefox和Safari也会显示两种不同的结果。

这是他们的样子：

Safari＆amp;铬：

火狐：

正如您所看到的，Safari和Chrome都会显示出来。另一方面，Firefox没有。顶部有更多的填充/边距，它在底部溢出。

我如何让Firefox显示与Safari和Chrome相同的内容？

注意：我也在使用Meyer Web reset。

SASS：

@import variables.sass
$postWidth: 200px
#content
  min-height: calc(100% - 400px)
  .blog-post
    display: flex
    border-bottom: 1px solid $blue
    .day
      width: #{$postWidth}
    .post
      width: calc(100% - #{$postWidth})

CSS：

#content .blog-post {
    display: flex;
    border-bottom: 1px solid #2da2dc
}

#content .blog-post .day {
    width: 200px
}

#content .blog-post .post {
    width: calc(100% - 200px)
}