我有一个小元素在 safari 和 firefox 中运行良好，但在 chrome 中却不行。这是我为网络开发的第一个元素之一，所以仍然很新鲜。我制作了一些 gif 动图，可以省去很多解释工作。
这在 safari 中正常工作:
但这就是 chrome 中发生的事情:
所以这没有按预期工作。我的第一个想法是它可能是 iframe 和 chrome 的问题，但据我所知，这些文件是在本地服务器上运行的，这应该不是问题。文本没有被下推，这让我感到困惑，因为它表明 css 没有被正确解释？正如我所说，我对此还是陌生的，这是我第一次在不同的浏览器中测试一个元素，所以不确定这个问题对我的元素有多具体。非常感谢任何帮助。
这是重现问题所需的完整代码。请记住，除非您运行本地服务器，否则 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 的填充和边距都为零!
最佳答案
我相信您遇到的一些问题是由于将 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;
}
关于javascript - Chrome 无法正确显示 iframe 和/或转换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40517965/