html - 背景图片未显示在 Firefox 中设置的负上边距

Question

我有一个使用 top-margin: -28px; 的滚动图像部分（图像是背景图像而不是标签）将其移动到我正在制作的网站上的部分标题下方。它在 Safari、Chrome 等上完美显示，但在 Firefox 上，图像的顶部 28px 没有显示。

任何想法为什么？我不知道，这让我发疯。

该网站在这里http://www.chelt.org.uk

Answer 1

enter code here改用.top：

.slides{
    top: -28px;
}

同时删除负边距

#feature {
    margin-top: -28px; <-- Remove
    overflow: hidden;
}

在其他新闻中，您#feature不止一次出现在标记中。一个 ID 应该只出现一次。如果您需要在多个元素上使用它，它应该是一个类。

Answer 2

您的负边距应用于 的子<div>标签#slides。

由于您已overflow: hidden;申请#slides，因此被推到 div 之外的部分#slides是隐藏的。

解决方案：

1. margin-top从_#feature

2. 添加top: -28px;到#slides

我还应该指出，#feature为所有幻灯片分配 Id 是无效的。ID 必须是唯一的，这意味着您不能拥有多个相同的 ID。你应该做到#feature-1，#feature-2....如果你必须为幻灯片分配一个 ID。