Question

我有一个小项目在safari和firefox中工作正常，但不是在chrome中。这是我为网络开发的第一个项目之一，所以仍然非常新鲜。我制作了一些GIF，这将为我节省很多解释。

这在safari中正常工作：

但这是在chrome中发生的事情：

所以这不符合预期。我的第一个想法是它可能是iframe和chrome的问题，但是文件在本地服务器上运行，据我所知，它应该不是问题。文本没有被推下来，所以这让我感到困惑，因为它表明css没有被正确解释？正如我所说的，我还是新手，这是我第一次在不同的浏览器中测试项目，所以不确定这个问题对我的项目有多具体。任何帮助非常感谢。 P

以下是重现问题所需的完整代码。请记住，除非您运行本地服务器，否则Chrome将无法正常播放iframe。如果你想这样做，这取决于你。我得到的布局问题与iframe播放无关。

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test for S.O.</title>
    <link rel="stylesheet" type="text/css" href="forStack.css">
</head>
<body> 
<div id="container">

<div id="backgroundLeft"><img id='backgroundLeftImage' src="image1.jpg" width="100%" height="100%"></div>

<div id="wrap">

<p>Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.   
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.<span id="linkID" class="link"> click me </span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>   
</span> Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. 
Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.
    </p>
   </div>
 <div id="backgroundRight"><img id='backgroundRightImage' src="image2.jpg" width="100%" height="100%"></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script src="scriptStack.js"></script>
</body>
</html>

CSS

html, body {
    min-height: 100;
    margin: 0px;
}

p span iframe {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

#backgroundLeft{
    position: fixed;
    float: left;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

#backgroundLeftImage {
    position: absolute;
}

#backgroundRightImage{
    position: absolute;
}

#wrap{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 100px auto;
    width: 20%;
}

#backgroundRight{
    position: fixed;
    left: 70%;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

p{
    line-height: 2em;
    vertical-align: top;
    position: relative;
}

.videos {width: 100%;}

.link {
    color: #d6820e;
    cursor: pointer;
}

.link:hover {
    color: #d6460e;
}

iframe {
    border:0 none;
}

.rect{
    float: left;
    height: 0px;
    width: 100%;    
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
    display: inline-block;
}

JS

$(document).ready(function(){

        var player;
        var frame = $("#frame");

        frame.bind("load", function () {
            player = $(this).contents().find("#testVid");
            player.on('ended', function () {
                frame.removeClass("open");
            });
        });

        $("#linkID").click(function(){

                if (frame.hasClass("open")) {   

                    frame.removeClass("open");
                    frame.contents().find('#testVid').get(0).pause();

                } else {

                    frame.attr("src","iframe.html");
                    document.getElementById('frame').onload = function() {
                        frame.addClass("open");
                        frame.contents().find('#testVid').get(0).play();
                    }
                }   
        });   
});

Iframe.html的

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="script2.js"></script>

    <link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>


    <video id="testVid" width="100%">
        <source src="mickey.mp4" type="video/mp4">
    </video>



</body>
</html>

----------------------------------------------- - - - - - - - 编辑 - - - - - - - - - - - - - - - - - - -----------------------------

我已经从“.rect”类中删除了“left”属性并添加了display：inline，这解决了chrome显示问题，但现在我的文本中出现了奇怪的空白，如下所示：

我已确保页面上每个可能的元素，类或id的填充和边距为零！

Answer 1

我认为您遇到的一些问题是由于display: block;和display: inline-block;混合了相同的元素。

从.rect删除float属性，并从.open显示属性会产生以下结果，这似乎与预期一致，没有其他更改。

.rect{
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
}

Answer 2

我不确定您是否在代码中没有使用任何position，我尝试过你使用过的同类课程，现在为我删除float 正如我之前所说，你的css中可能有position，

更新：我根据您的代码更新了

$(document).ready(function(){
	$("#linkID").click(function(){
		$(".rect").toggleClass("open");	
	});
	
});

html, body {
    min-height: 100;
    margin: 0px;
}

p span iframe {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

}

#backgroundLeft{
    position: fixed;
    float: left;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

#backgroundLeftImage {
    position: absolute;
}

#backgroundRightImage{
    position: absolute;
}

#wrap{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    margin: 100px auto;
    width: 20%;
}

#backgroundRight{
    position: fixed;
    left: 70%;
    width: 30%;
    min-height: 100%;
    overflow: hidden;
}

p{
    line-height: 2em;
    vertical-align: top;
    position: relative;
}

.videos {width: 100%;}

.link {
    color: #d6820e;
    cursor: pointer;
}

.link:hover {
    color: #d6460e;
}

iframe {
    border:0 none;
}

.rect{
    height: 0px;
    width: 100%;    
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="container">

<div id="backgroundLeft"><img id='backgroundLeftImage' src="image1.jpg" width="100%" height="100%"></div>

<div id="wrap">

<p>Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.   
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.<span id="linkID" class="link"> click me </span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0 src="http://ak1.picdn.net/shutterstock/videos/6530561/preview/stock-footage-seven-little-kids-sit-at-red-table-with-cake-and-throw-confetti-at-birthday-party-inscription-happy.mp4"></iframe>   
</span> Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. 
Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.
    </p>
   </div>
 <div id="backgroundRight"><img id='backgroundRightImage' src="image2.jpg" width="100%" height="100%"></div>

    <script type="text/javascript" src="jquery.js"></script>
    <script src="js.js"></script>

Answer 3

您希望iframe表现为段落的一部分。我没有足够的代码可供使用，但您可以通过将其显示属性设置为inline-block而不是block来确保元素与周围文本内联。然后你可能需要删除float属性，可能需要设置一个相对位置和其他东西来调整对齐。

.rect {
  display: inline-block;
}

Chrome无法正常显示iframe和/或转换

3 个答案: