css - 絶対位置の再生ボタンアイコンが Firefox に表示されない

Question

ビデオギャラリーセクションでは、通常とホバーの 2 つのバージョンの再生ボタンが、ビデオのプレビュー画像の上に完全に配置されています。何らかの理由で、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;
}

どんな助けでも大歓迎です！

score 0 · Accepted Answer

すみません、昨日メインのスライドショー/ビデオプレーヤーを見ていました...

他の再生ボタンの変更を修正するには:

.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 プロパティを使用できなかったため、予測できない結果が得られました。詳細については、上記のリンクをご覧ください

score 0 · Accepted Answer

div.videoPreviewImg { 
  position: relative;
}

プレイボタンの「ラッピング」divは相対的に配置され、プレイボタン自体は絶対的に配置されます。

絶対配置された要素は、ドキュメントフローから削除されます。親を基準にして自分自身を配置します。含まれている 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 には非常にスマートな「コード修正」システムが背後にあり、構文エラーが発生した場合に正しい構文を「推測」します。

しかし、クロムはサーバーから取得する画像をどのように知るのでしょうか?

とにかく、普段はこんなi tags風にしか使わないところを直せば大丈夫だと思います。

i tagsを使用して置き換えるかdiv、(前に述べたように)imgタグで置き換えることができます。

幸運を！

css - 絶対位置の再生ボタン アイコンが Firefox に表示されない

3 に答える 3

アップデート

Related

Reference

css - 絶対位置の再生ボタンアイコンが Firefox に表示されない