Question

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

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

div.videoPreview {
  float: left;
  display: inline-block;
  width: 21%;
  margin: 2%;
  margin-bottom: 0;
}

div.videoPreview:last-child {
  margin-bottom: 2%;
}

div.videoPreviewImg { 
  position: relative;

}

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

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

div.videoPreviewImg:hover i.playButton {
  opacity: 0;
}

非常感谢任何帮助！

Answer 1

div.videoPreviewImg { 
  position: relative;
}

播放按钮的“包裹”div位于相对位置，而播放按钮本身位于绝对位置。

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

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

所以你可以改变位置：

div.videoPreviewImg { 
    position: absolute;
}

或者尝试将播放按钮的位置设置为相对，然后使用margins调整其外观。

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

祝你好运！

更新

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

enter image description here

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

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

<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，播放按钮的语法是正确的。对于其他视频，播放按钮声明为：

<i class="playButtonHover"></i>
<i class="playButton"></i>

然而（当然）他们应该

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

就像第一个视频一样。

实际上，按钮确实显示但没有图像。

这引出了一个问题：那为什么它在Chrome中有用？

然后我又发现了一些非常了不起的东西：

enter image description here

如您所见，chrome根本没有正确的语法。所以我认为发生的事情是，Chrome背后有一个非常智能的“代码修复”系统，如果您发出语法错误，它会“猜测”正确的语法。

但是再一次，Chrome如何知道从服务器抓取哪个图像？

无论如何，我认为如果您修复i tags通常只使用this，那么你会没事的。

您可以使用i tags替换div，或者只使用img标记替换它（如我之前提到的那样）。

祝你好运！

Answer 2

对不起我昨天看了主幻灯片/视频播放器......

要修复其他播放按钮，请更改：

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

到

.playButton {
  background: url(../img/playButton.png);
}
.playButtonHover {
  background: 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;
}

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

Content CSS | MDN
基本上你错过了使用内容属性，因此得到了一个不可预测的结果。查看以上链接以获取更多信息

Answer 3

我似乎已经弄明白了这个问题。非常感谢您的投入。当我将按钮包含为图像而不是图标时，它在Firefox中显示。我不想这样做，因为按钮不是内容，但由于它是唯一有效的修复，我可能会坚持使用它。再次感谢！

Firefox中没有显示绝对定位的播放按钮图标

3 个答案:

更新