html - 下一个/上一个按钮显示在 Firefox 中，而不是 Chrome？

Question

我有一个小 div，其中包含一个下一个/上一个按钮和一个 Page # out of #。麻烦的是，它只显示在 Firefox 中，而不是 Chrome。它使用 Foundation 4 的按钮代码和 Jekyll 的分页器代码来创建设置。

你可以在页面的右下角看到它，就在tx0rx0.com的页脚上方 我笔记本电脑上的 Chromium 什么也没显示，但代码在页面源代码查看器中。是什么赋予了？

Answer 1

.pagination div 的容器具有浮动元素但未清除。

由于容器是 #wrap 中的最后一个元素，因此它会受到此类的影响，该类会切断浮动的 .pagination ：

#wrap > *:last-child {
  padding-bottom: 6.25em;
}

您可以通过将 padding-bottom 更改为 margin-bottom 来解决此问题，或者对包含浮动 .pagination 元素的 div 应用 clear-fix。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

Answer 2

你有这样的事情：

#wrap {
  margin: 0 auto -6.25em;
}

该容器的底部边距设置为 -6.25em。你也有这样的事情：

#wrap > *:last-child {
  padding-bottom: 6.25em;
}

这有效地选择了最后一个孩子的div6.25em 。这里的意图似乎是这两者会相互抵消。但这不是正在发生的事情，因为样式应用于正常文档流中的不同块元素。因此，由于负边距，您的寻呼机被隐藏了。#wrappadding-bottom

我不确定你的意图是什么。除非有某种原因无法完成，否则简单的解决方法是：

#wrap {
  margin: 0 auto;
}

并消除这个：

#wrap > *:last-child {
  padding-bottom: 6.25em;
}