javascript - HTML JavaScript - div 元素在 Chrome 和 Safari/Firefox 之间的工作方式不同

标签 javascript html css

我正在开发一个 HTML 网站，其中包含由 JavaScript 脚本控制的嵌入式 YouTube 视频。

我有三个视频，它们在 Chrome 上都运行良好，但在 Safari 和 Firefox 上运行不佳。

最奇怪的是，我以相同的方式嵌入它们，在 Safari 和 Firefox 上，第一个视频工作正常，但当其他两个开始播放时，您只能听到音频。

您可以在这里访问该网站: https://matteo-stable-web-server.herokuapp.com/

在全屏桌面上，如果您点击右下角的箭头，您将看到第一个视频正在播放。 如果再次单击，您将在 Chrome 上看到第二个视频，但在 Safari 和 Firefox 上只能听到音频。

在检查页面时，我注意到由 YouTube API 在 div 元素内生成的 iFrame 元素与维度有一些差异。视频似乎正在播放，但它在其他地方。但这只是我的一种感觉(见下图)。

Inspection Comparison - Working vs Not working

这是 HTML(class="firstVideo"是我们正在寻找的)

<body >
        <nav role="navigation">
            <div id="menuToggle">

                <input type="checkbox" />

                <span></span>
                <span></span>
                <span></span>

                <ul id="menu">
                    <a href="./index.html"><li>Home</li></a>
                    <a href="#"><li>Come funziona</li></a>
                    <a href="./faq.html"><li>FAQ</li></a>
                    <a href="./blog.html"><li>Blog</li></a>
                    <a href="#"><li>Contatti</li></a>
                    <a href="./pdf/RegolamentoFlav.pdf" target="_blank"><li>Regolamento</li></a>
                    <a href="#"><li>Ringraziamenti</li></a>
                </ul>
                </ul>
            </div>
        </nav>

        <div id="rotateRect" class="redRect rotateRectStart hideXS"></div>



        <div id="nav">
            <div id="leftArrow"><img src="img/arrow_right.png" alt="flav website controls"></div>
            <div id="rightArrow"><img src="img/arrow_right.png" alt="flav website controls"></div>
        </div>
        <div class="containerTop">
        <div id="backImg">
            <div class="landscapeImg"></div>
            <div class="firstImg"></div>
        </div>

        <div id="leftContainer">
            <div class="splashLeft">
                <img class="logoHome" src="img/logo_flav.svg" alt="flav app"><br>
                <h5>Ciò che vuoi, dove vuoi, quando vuoi.</h5>
                <h1>Richiedi, Offri…<br>GUADAGNA!</h1>
                <h2>CON FLAV ESSERE DISPONIBILI RIPAGA. SEMPRE.</h2>
                <a href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a>
                <a href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a>
                <br><br>
                <h6>CONTACT & FOLLOW US ON:</h6>
                <a href="https://www.facebook.com/app.FLAV.it/"><img class="socialIcon" src="img/facebook.png" alt="flav facebook fanpage"></a>
                <a href="https://www.instagram.com/flav.it/"><img class="socialIcon" src="img/instagram.png" alt="flav instagram fanpage"></a>
                <a href="https://www.youtube.com/channel/UC5MeGaeI9boibIcUq0X4FXg"><img class="socialIcon" src="img/youtube.png" alt="flav youtube channel"></a>
                <a href="mailto:info@flav.it?Subject=Information"><img class="socialIcon" src="img/mail.png" alt="flav mail"></a>
            </div>
        </div>

        <div id="rightContainer">
            <img class="iphoneSplash" src="img/iphoneSplash.png" alt="flav, ciò che vuoi quando vuoi dove vuoi">
        </div>

        <div id="firstLeftPart">
            <img class="redLogo hideXS" src="img/logoRed.svg" alt="flav, ciò che vuoi quando vuoi dove vuoi"><br>
            <div class="numberSect01">N° <span class="bigNum">01</span></div>
            <h2 id="titleNumbFirst" class="titlePart01"><span class="numb hideXS">| 03</span><br>Fai la tua richiesta</h2>
            <br>
            <span class="subTitle">Chiedi ciò di cui hai bisogno.</span><br>
            <p>
              Ti serve qualcosa o hai bisogno di una mano?<br>Pubblica la tua richiesta scegliendo tra beni e servizi, seleziona la categoria, stabilisci luogo e ora.<br>Ricevi le risposte di utenti e professionisti direttamente nella App <br>e scegli l’utente che fa per te con l’offerta più conveniente.<br><br>Trovare ciò di cui hai bisogno non è mai stato cosi facile!<br><span class="downloadIt">Scarica FLAV!</span><br>       
            </p>

        </div>

        <div id="iphoneFirst">
            <img class="whiteIphone"  src="img/iphoneFirstPart.png" alt="flav, ciò che vuoi quando vuoi dove vuoi">
            <div class="firstVideo" id="videoNumberOne"></div>
            <a class="mLeft hideXS" href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a>
            <a class="hideXS" href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a>
        </div>

        <div id="secondRightPart">
            <img class="redLogo hideXS" src="img/logo_flav.svg" alt="flav, ciò che vuoi quando vuoi dove vuoi"><br>
            <div class="numberSect01">N° <span class="bigNum">02</span></div>
            <h2 id="titleNumbFirst" class="titlePart01"><span class="numb hideXS">| 03</span><br>FAI IL TUO PREZZO</h2>
            <br>
            <span class="subTitle">Renditi disponibile.</span><br>
            <p>
              Vuoi rispondere a una richiesta? <br><br>Consulta le richieste della community.<br>Apri la mappa, scopri di cosa hanno bisogno le persone intorno a te<br>e fai il tuo prezzo.<br><br>Guadagnare non è mai stato cosi semplice!<br><span class="downloadIt">Scarica FLAV!</span><br>        
            </p>

        </div>

        <div id="iphoneSecond">
            <img class="whiteIphone" src="img/iphoneFirstPart.png" alt="flav, ciò che vuoi quando vuoi dove vuoi">
                <div class="firstVideo" id="videoNumberTwo"></div>
            <a class="mLeft hideXS" href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a>
            <a class="hideXS" href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a>
        </div>

        <div id="thirdLeftPart">
            <img class="redLogo hideXS" src="img/logoRed.svg" alt="flav, ciò che vuoi quando vuoi dove vuoi"><br>
            <div class="numberSect01">N° <span class="bigNum">03</span></div>
            <h2 id="titleNumbFirst" class="titlePart01"><span class="numb hideXS">| 03</span><br>FAI LA TUA OFFERTA</h2>
            <br>
            <span class="subTitle">Vendi, offri e guadagna.</span><br>
            <p>
              Vuoi vendere qualcosa? Vuoi incrementare la tua visibilità e i tuoi guadagni? <br><br>Pubblica la tua offerta di beni o servizi,<br> ricevi le risposte degli utenti e concorda ogni dettaglio in chat.<br> In modo facile e gratuito.<br>La chiave del successo è essere ovunque!<br><span class="downloadIt">Scarica FLAV!</span><br>       
            </p>

        </div>

        <div id="iphoneThird">
            <img class="whiteIphone" src="img/iphoneFirstPart.png" alt="flav, ciò che vuoi quando vuoi dove vuoi">
            <div class="firstVideo" id="videoNumberThree"></div>
            </video>
            <a class="mLeft hideXS" href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a>
            <a class="hideXS" href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a>

        </div>

        <div class="hideXL">
            <a href="#"><img class="badge" src="img/app-store-badge.png" alt="download on the app store"></a>
            <a href="#"><img class="badge" src="img/google-play-badge.png" alt="download on the google play store"></a>
            <br><br>
            <h6>CONTACT & FOLLOW US ON:</h6>
            <a href="https://www.facebook.com/app.FLAV.it/"><img class="socialIcon" src="img/facebook.png" alt="flav facebook fanpage"></a>
            <a href="https://www.instagram.com/flav.it/"><img class="socialIcon" src="img/instagram.png" alt="flav instagram fanpage"></a>
            <a href="https://www.youtube.com/channel/UC5MeGaeI9boibIcUq0X4FXg"><img class="socialIcon" src="img/youtube.png" alt="flav youtube channel"></a>
            <a href="mailto:info@flav.it?Subject=Information"><img class="socialIcon" src="img/mail.png" alt="flav mail"></a>
        </div>
        </div>



        <script src="js/jquery-1.12.0.min.js"></script>
        <script src="js/base.js"></script>
    </body>

这是 JavaScript

var countSlide = 0;

//YOUTUBE START
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player1;
var player2;
var player3;

function onYouTubeIframeAPIReady() {
    player1 = new YT.Player('videoNumberOne', {
       videoId: 'Kifn_WVGReM',
        events: {
          'onReady': onPlayerReady
        }
    });

    player2 = new YT.Player('videoNumberTwo', {
        videoId: 'wa7aa5-GxW8',
        events: {
        'onReady': onPlayerReady
        }
    });

    player3 = new YT.Player('videoNumberThree', {
        videoId: 'YCIOKI0ZSTM',
        events: {
          'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    event.target.setVolume(50);
    //event.target.pauseVideo();
}

//YOUTUBE END

// $( document ).ready(function() {      

// });

function pauseAndReset(video) {
    video.pauseVideo();
    video.seekTo(0);
}

//SLIDE ROUTINE

$("#rightArrow").click(function(){
    if (countSlide < 3) {
        countSlide++;
    }

    if (countSlide == 1){
        toBottom();

        player1.playVideo();
    }
    else if (countSlide == 2) {
        toTop();

        pauseAndReset(player1);
        player2.playVideo();
    }
    else if (countSlide == 3) {
        setTimeout(toSndBottom,25);
        setTimeout(toTop,50);
        setTimeout(toSndBottom,70);

        pauseAndReset(player2);
        player3.playVideo();
    }
    else if (countSlide >= 3) {
        //Go Back to Homepage
    }     
});

$("#leftArrow").click(function(){
    if (countSlide > 0) {
        countSlide--;
    }

    if (countSlide == 0){
        toStart();
        pauseAndReset(player1);
    }
    else if (countSlide == 1) {
        toBottom();
        pauseAndReset(player2);
        player1.playVideo();
    }
    else if (countSlide == 2) {
        toSndTop();
        pauseAndReset(player3);
        player2.playVideo();
    }
});
//SLIDE ROUTINE ENDS

$(".redLogo").click(function(){
    toStart();
    countSlide = 0;

    $("#firstLeftPart").css("marginLeft", "-105%");
    $("#iphoneFirst").css("marginLeft", "152%");

    $("#secondRightPart").css("marginLeft", "-105%");
    $("#iphoneSecond").css("marginLeft", "152%");

    $("#thirdLeftPart").css("marginLeft", "-105%");
    $("#iphoneThird").css("marginLeft", "152%"); 
});



function toStart () {
    $("#rotateRect").addClass('rotateRectStart');
    $("#rotateRect").removeClass('rotateRectBottom');
    $("#rotateRect").removeClass('rotateRectTop');
    $(".iphoneSplash").css("marginLeft", "0%");
    $(".splashLeft").css("marginLeft", "0%");
    $(".landscapeImg").fadeIn('fast');
    $(".firstImg").fadeOut('slow');

    $("#firstLeftPart").css("marginLeft", "-105%");
    $("#iphoneFirst").css("marginLeft", "152%");

}

function toTop () {
    $("#rotateRect").removeClass('rotateRectStart');
    $("#rotateRect").removeClass('rotateRectBottom');    

    $("#rotateRect").addClass('rotateRectTop');

    $("#firstLeftPart").css("marginLeft", "-105%");
    $("#iphoneFirst").css("marginLeft", "152%");

    $("#secondRightPart").css("marginLeft", "5%");
    $("#iphoneSecond").css("marginLeft", "52%");  
}

function toBottom () {
    $("#rotateRect").removeClass('rotateRectStart');
    $("#rotateRect").removeClass('rotateRectTop');
    $("#rotateRect").addClass('rotateRectBottom');

    $(".iphoneSplash").css("marginLeft", "200%");    
    $(".splashLeft").css("marginLeft", "-200%");

    $(".landscapeImg").fadeOut('fast');
    $(".firstImg").fadeIn('slow');

    $("#firstLeftPart").css("marginLeft", "5%");
    $("#iphoneFirst").css("marginLeft", "52%");

    $("#secondRightPart").css("marginLeft", "-105%");
    $("#iphoneSecond").css("marginLeft", "152%"); 
}

function toSndBottom () {

    $("#rotateRect").removeClass('rotateRectTop');
    $("#rotateRect").addClass('rotateRectBottom');

    $("#thirdLeftPart").css("marginLeft", "5%");
    $("#iphoneThird").css("marginLeft", "52%");  

    $("#secondRightPart").css("marginLeft", "-105%");
    $("#iphoneSecond").css("marginLeft", "152%"); 
}

function toSndTop () {
    $("#rotateRect").removeClass('rotateRectBottom');    
    $("#rotateRect").addClass('rotateRectTop');

    $("#secondRightPart").css("marginLeft", "5%");
    $("#iphoneSecond").css("marginLeft", "52%");

    $("#thirdLeftPart").css("marginLeft", "-105%");
    $("#iphoneThird").css("marginLeft", "152%"); 
}

我对这个很迷茫。 提前谢谢大家! 干杯!

最佳答案

这就是问题所在。

Firefox 曾经拥有页面的这种美妙的“3d View ”，因此您可以准确地看到它在哪里 - 不幸的是，他们在几个版本前就去掉了它 - 这只是一个猜测，但我认为这就是你的方式正在使用边距将 div“移开”，这可能会使 firefox/safari 混淆(或者它们的布局算法略有不同)——CSS 的问题是，有些东西可以被不同的浏览器解释不同，而且它们都是认为他们是正确的!!虽然，我认为那只发生在 Netscape vs IE 时代

关于javascript - HTML JavaScript - div 元素在 Chrome 和 Safari/Firefox 之间的工作方式不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39274592/

上一篇：html - 像 Bootstrap 一样对齐图像

下一篇：css - 在 Angular ui-src中以大写代码转换

相关文章：

javascript - 为纵向显示缩放移动响应式横向布局

javascript - 我们是否应该尽可能使用服务器端解决方案代替 javascript 进行多设备观看？

javascript - 如何检测 Protractor 中不是第一个和最后一个的中间其他元素

Javascript:警报显示多次

javascript - 如何在不保存信息的情况下提醒用户离开页面

javascript - HTML - 将文本输入绑定(bind)到标签

javascript - 当用户滚动浏览时触发 Jquery

javascript - 使用 Flexbox 时 Apex 图表无法正确调整大小

javascript - 位于下方的图像在鼠标悬停时可见

javascript - Visual Studio Code - 挖空 - 找不到名称 'ko'

©2024 IT工具网  联系我们