背景图像未显示在 Firefox 中设置负上边距的位置答案

【问题标题】：Background Image not showing where negative top-margin set in Firefox背景图像未显示在 Firefox 中设置负上边距的位置
【发布时间】：2013-03-18 22:51:15
【问题描述】：

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

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

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

【问题讨论】：

标签： html css firefox background-image

【解决方案1】：

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

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

解决办法：

从#feature中删除margin-top
将top: -28px;添加到#slides

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

【讨论】：

【解决方案2】：

enter code here改用.top：

.slides{
    top: -28px;
}

同时删除负边距

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

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

【讨论】：

谢谢！完美修复。还修复了 ID 错误，感谢您的提醒。