0

I have a video gallery section in which two versions, normal and hover, of a play button are absolutely positioned above a preview image of a video. For some reason the play buttons do not show at all in Firefox. The current version of the page is here, and the code is as follows:

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

Any help would be very much appreciated!

4

3 回答 3

0

抱歉，我昨天在看主要的幻灯片/视频播放器...

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

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

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

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

于 2013-07-03T14:02:07.057 回答
0 
div.videoPreviewImg { 
  position: relative;
}

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

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

如果包含的 div 没有定位，那么绝对定位的 div 将使用上一级的父级。

所以你可以改变位置：

div.videoPreviewImg { 
    position: absolute;
}

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

另外，不要责怪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.

如果仔细观察，您会发现只有第一个img，播放按钮的语法是正确的。对于其他视频，播放按钮声明为：

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

而（当然）他们应该是

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

就像第一个视频一样。

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

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

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

在此处输入图像描述

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

但话又说回来，chrome 是如何知道从服务器获取哪个图像的呢？

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

您可以i tags使用 a替换它，也可以用标签div替换它（如我之前提到的） 。img

祝你好运！

于 2013-07-02T21:40:34.053 回答
0

我似乎已经弄清楚了这个问题。非常感谢大家的意见。当我将按钮包含为图像而不是图标时，它会显示在 Firefox 中。我不想这样做，因为按钮不是内容，但由于它是唯一有效的修复程序，我可能会坚持下去。再次感谢！

于 2013-07-03T16:18:59.673 回答