Chrome 未正确显示 iframe 和/或过渡

Posted 2023-03-06

技术标签:

【中文标题】Chrome 未正确显示 iframe 和/或过渡【英文标题】：Chrome not displaying iframe and/or transition properly 【发布时间】：2017-03-23 21:53:49 【问题描述】：

我有一个在 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"  ></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"  ></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;

$(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" >
        <source src="mickey.mp4" type="video/mp4">
    </video>



</body>
</html>

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

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

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

【问题讨论】：

通过浮动.rect 元素，您将其从正常流程中移除。显然，Firefox 不在乎，但 Chrome 不在乎。尝试在 Chrome 上不使用浮动。如果我从我的 .rect 类中取出浮点数，它不能解决问题并且会弄乱我的布局请发布足够的代码来重现问题。能否提供代码给我们？我已经上传了所有代码。 【参考方案1】：

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

从 .rect 中删除 float 属性，从 .open 中删除 display 属性会导致以下结果，这似乎按预期工作，没有其他更改。

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

【讨论】：

【参考方案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"  ></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"  ></div>

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

【讨论】：

【参考方案3】：

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

.rect 
  display: inline-block;

【讨论】：

以上是关于Chrome 未正确显示 iframe 和/或过渡的主要内容，如果未能解决你的问题，请参考以下文章

从嵌入按钮复制的 iframe 中未显示正确的 url

Unicode 字体在 Chrome 上未正确显示

在 chrome 中的第一次过渡时隐藏卡背

Chrome 中的 Roboto 字体未正确显示

utf-8 字符未在 chrome 中显示 [关闭]

当 iframe 在拖放功能中移动时，Chrome 中的 Dragend 事件未触发