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

Question

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

您可以在页面右下方的tx0rx0.com页脚上方看到它 我的笔记本电脑上的铬没有显示任何内容，但代码在页面源查看器中。是什么给了什么？

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;
}

有效选择div的最后一个孩子#wrap以获得padding-bottom 6.25em。这里的意图似乎是那两个会相互抵消;但这不是正在发生的事情，因为样式应用于普通文档流程中的不同块元素。因此，由于利润率较低，您的寻呼机会被隐藏。

我不确定你的意图是什么。除非出于某些原因无法完成，否则简单的修复是：

#wrap {
  margin: 0 auto;
}

并消除这个：

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