Css 绝对定位的播放按钮图标在Firefox中不显示

我有一个视频库部分，其中播放按钮的两个版本，普通和悬停，绝对位于视频预览图像的上方。由于某些原因，Firefox中根本不显示播放按钮。页面当前版本为，代码如下：

<div class="videoPreview">
    <div class="videoPreviewImg">
        <img src="img/promo/groupFitness.jpg">
        <i class="playButtonHover"></i>
        <i class="playButton"></i>
    </div>
</div>

任何帮助都将不胜感激

div.videoPreviewImg { 
  position: relative;
}

播放按钮的“包装”div是相对定位的，而播放按钮本身是绝对定位的

绝对定位的元素将从文档流中删除。他们将自己定位在相对于父母的位置。如果包含的div是相对定位的，则包含的绝对定位div将自身定位在该父级中。但是，由于绝对定位元素已从流中移除，因此父div将崩溃，因为就其而言，它不包含任何内容

如果未定位包含的div，则绝对定位的div将使用上一级父级

因此，您可以更改位置：

div.videoPreviewImg { 
    position: absolute;
}

或者尝试将播放按钮的位置设置为相对，然后使用

边距调整其外观

另外，不要责怪FF。你可能已经在IE中测试过，这意味着FF是正确的，但IE不是

祝你好运

更新
在Firefox 3.6.28版中查看您的网站，我发现以下内容：

<div class="videoPreview">

                <a class="video1" href="#">
                    <div class="videoPreviewImg">
                        <img class="actualVideoPreImg" src="img/promo/groupFitness.jpg">
                        <img class="playButtonHover" src="../img/playButtonHover.png">
                        <img class="playButton" src="../img/playButton.png">
                    </div>
                </a>
            </div>

            <div class="videoPreview">
                <a class="video2" href="#">
                    <div class="videoPreviewImg">
                        <img src="img/promo/mealPlans.jpg">
                        <i class="playButtonHover"></i>
                        <i class="playButton"></i>
                    </div>
                </a>
            </div>


            <div class="videoPreview">  
                <div class="videoPreviewImg">
                    <img src="img/promo/personalTraining.jpg"/>
                    <i class="playButtonHover"></i>
                    <i class="playButton"></i>
                </div>
            </div>
//etc. etc. etc.


如您所见，第一个预览按钮显示得非常完美

然后我继续查看您的代码，令我惊讶的是，我发现了以下内容：

<div class="videoPreview">

                <a class="video1" href="#">
                    <div class="videoPreviewImg">
                        <img class="actualVideoPreImg" src="img/promo/groupFitness.jpg">
                        <img class="playButtonHover" src="../img/playButtonHover.png">
                        <img class="playButton" src="../img/playButton.png">
                    </div>
                </a>
            </div>

            <div class="videoPreview">
                <a class="video2" href="#">
                    <div class="videoPreviewImg">
                        <img src="img/promo/mealPlans.jpg">
                        <i class="playButtonHover"></i>
                        <i class="playButton"></i>
                    </div>
                </a>
            </div>


            <div class="videoPreview">  
                <div class="videoPreviewImg">
                    <img src="img/promo/personalTraining.jpg"/>
                    <i class="playButtonHover"></i>
                    <i class="playButton"></i>
                </div>
            </div>
//etc. etc. etc.

然而（当然）他们应该是

<img class="playButtonHover" src="../img/playButtonHover.png">
<img class="playButton" src="../img/playButton.png">



就像第一个视频一样

实际上，按钮确实出现了，但没有图像

这就引出了一个问题：那么为什么它在Chrome中工作

然后我又发现了一件非常了不起的事情：


正如您所见，chrome根本没有正确的语法。
所以我认为Chrome背后有一个非常智能的“代码修复”系统，如果你犯了语法错误，它可以“猜测”正确的语法

但是，chrome又如何知道从服务器抓取哪个图像呢

无论如何，我想如果你修复了
I标签
，它通常只会像这样使用，那么你就没事了

您可以使用
div
替换
i标记
，也可以用
img
标记替换它（就像我前面提到的那样）

祝你好运
 对不起，我昨天看了主幻灯片/视频播放器

要修复其他播放按钮的更改，请执行以下操作：

.playButton {
  content: url(../img/playButton.png);
}
.playButtonHover {
  content: url(../img/playButtonHover.png);
}

到

给它一个给定的尺寸，就像这样：

div.videoPreviewImg i {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  -webkit-transition: opacity .7s ease-in-out;
  -moz-transition: opacity .7s ease-in-out;
  -o-transition: opacity .7s ease-in-out;
  transition: opacity .7s ease-in-out;
  width:48px;
  height:48px;
}

最后但并非最不重要的是，在视频预览上设置宽度，而不是最大宽度：

div.videoPreviewImg img {
  width: 100%;
  z-index: 1;
}

content CSS属性与：：before和：：after一起使用
伪元素生成元素中的内容。插入的对象
使用content属性的是匿名替换的元素。-MDN



基本上，您没有使用content属性，因此得到了不可预测的结果。查看上面的链接了解更多信息
我似乎已经解决了这个问题。非常感谢大家的意见。当我将按钮作为图像而不是图标包含时，它在Firefox中显示出来。我不想这样做，因为按钮不满足，但因为这是唯一有效的修复，我可能会坚持下去。再次感谢
 试着给
div.videoPreview
一个高度。Firefox的哪个版本？刚刚在FirefoxV22上检查过，它看起来ok@apaul34208，我使用的版本是21，但我刚刚更新，问题仍然存在。你看到图像上方的灰色播放按钮，悬停时会变成蓝色？@Jean Paul，我不能给它设定高度，因为它反应灵敏。这个方法，正如在头版上使用的一样（请参阅我对您下面答案的答复），不要求父容器具有高度。嗨，Jean Paul，谢谢您的输入。事实上，我首先在Chrome上测试了它，在那里它工作得很好。尚未在IE中进行测试。我无法将位置设置为相对，因为它将在图像下方保留一个通常放置图标的空间，此外，我将不得不使用px将其移动到我想要的位置，这与响应性设计不符。我还尝试了你的建议，将VideoPreviewMg div的位置改为绝对，但这也没有解决问题。我很困惑为什么它不起作用，因为我在网站首页（见文章链接的网站索引页）上使用了相同的方法，在一些图片上方获得了一个黄色条和文本。请参阅以下代码注释。
组适合度类
div.promotItem{position:relative；float:left；display:inline块；宽度：29.333333%；边距：02%20px2%；边框：1px solid 35; A0A0A0；}div.promotItem img{z-index:1；最大宽度：100%；}div{位置：绝对；左：0；右：0；底部：0；填充：4px；高度：35px；行高：26px；文本对齐：居中；溢出：隐藏；}
Hey Jean Paul，当我将图标从转换为时，您正在查看该网站。这就是为什么您在Firefox的第一个视频库项目中看到图标正确显示的原因。因此，您是正确的，这就是要做的事情。非常感谢您的帮助和您的全面回复！谢谢，apaul。不幸的是，没有骰子：（我实施了您的更改，但它也在Chrome中停止工作。这似乎是因为从内容更改为背景以插入图像。当我删除该添加内容时，它在Chrome中恢复良好，但在Firefox中仍然不走运。感谢您的全面回复！感谢您的帮助。@BrandonMcPeak you just need要将宽度和高度添加到div.videopreviewimgi

中，您有两倍的宽度，但没有高度。它只在chrome中工作checked@BrandonMcPeak你试过了吗？

div.videoPreviewImg i {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  margin-top: -24px;
  margin-left: -24px;
  -webkit-transition: opacity .7s ease-in-out;
  -moz-transition: opacity .7s ease-in-out;
  -o-transition: opacity .7s ease-in-out;
  transition: opacity .7s ease-in-out;
  width:48px;
  height:48px;
}

div.videoPreviewImg img {
  width: 100%;
  z-index: 1;
}