4
我有一個小工程，在safari和firefox中工作正常，但沒有在Chrome中工作。這是我爲web開發的第一批項目之一，所以仍然非常新鮮。我製作了幾個GIF文件，這將爲我節省很多解釋。Chrome瀏覽器沒有正常顯示iframe和/或轉換
這是在Safari中正常工作：
但是，這是在Chrome會發生什麼：
所以按預期這是行不通的。我的第一個想法是，它可能是一個與iframe和鉻的問題，但文件在本地服務器上運行，據我瞭解，這應該不是一個問題。文本沒有被壓低，所以這讓我感到困惑，因爲它表明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>
------------------------------------------------- - - - - - - 編輯 - - - - - - - - - - - - - - - - - - - ---------------------------
我有，刪除「左」屬性形式的「。」類，並添加顯示：inline和已經解決了鍍鉻的顯示問題，但現在也有奇怪的缺口全部通過我的文字，就像這樣：
而且我已經確定的填充和利潤率是零到每一個可能的要素類或在頁面上的ID！
通過浮動'.rect'元素，您將它從正常流程中移除。顯然，Firefox並不關心Chrome的功能。儘量不要在Chrome上浮動。 –
如果我從我的.rect類留下的浮動它不能解決問題，它會擾亂我的佈局 – Paul
請發佈足夠的代碼來重現此問題。 –