我的网站上有一个页面,它使用iframe在服务器上显示另一个文件,除了这个问题,一切看起来都很好: https://www.dropbox.com/s/dyez8mbeb792udg/2016-03-08-1639-59.flv?dl=0
以下是显示iframe页面的代码:
<!DOCTYPE html>
<html>
<head>
<title>Online FoodTube - Home</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
</head>
<body>
<div id="MasterHead-Container">
<a href="/~/FoodTube"><img title="Online FoodTube Home" src="foodtube.png" width="80.5" height="32"></a>
<!--<a id="TitleUrl" href="ayy">ayy</a>
<a id="UserUrl" href="ayy">ayy</a>-->
</div>
<iframe id="VideoIframe" src="new/index.php" onload="resizeIframe(this)"></iframe>
<div id="MasterFooter-Container">
<a href="/~/FoodTube"><img title="Online FoodTube Home" src="foodtube.png" width="80.5" height="32"></a>
<span id="MasterFooter-Thanks">Thank you for visiting Online FoodTube.</span>
<br>
<a id="SimpleUrl" href="copyright">Copyright Info</a>
<span id="UrlSpacer">--</span>
<a id="SimpleUrl" href="ayy">The Author</a>
<span id="UrlSpacer">--</span>
<a id="SimpleUrl" href="/">StratHaxxs Co. Home</a>
</div>
</body>
</html>
这是iframe php文件代码:
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<img src="//i.ytimg.com/vi/xyAICqyWbes/mqdefault.jpg" alt="" height="110" width="196">
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
</div>
<div id="VideoContainer">
<div id="VideoThumbnail">
<span id="VideoTime">5:25</span>
<div id="test" style="" ></div>
</div>
</div>
<a id="TitleUrl" href="ayy" target="_parent" >ayy</a>
他们都使用相同的样式表:
* {
font-family: Verdana, Arial, sans-serif;
}
body {
background-color: #fff;
cursor: default;
}
h1 {
font-size: 15pt;
}
p {
font-size: 10pt;
}
#MasterHead-Container {
background: #fff;
border-bottom: 1px solid #e8e8e8;
min-width: 0;
padding-bottom: 8px;
padding-top: 7px;
position: relative;
}
#MasterFooter-Container {
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
background: #fff;
border-top: 1px solid #e8e8e8;
min-width: 0;
padding-top: 10px;
}
#MasterFooter-Thanks {
position: relative;
top: -10%;
}
#TitleUrl {
color: #167ac6;
text-decoration: none;
}
#TitleUrl:hover {
text-decoration: underline;
}
#UserUrl {
color: #767676;
text-decoration: none;
}
#UserUrl:hover {
color: #167ac6;
text-decoration: none;
}
#SimpleUrl {
color: #767676;
text-decoration: none;
color: #666;
font-size: 11px;
font-weight: 500;
}
#SimpleUrl:hover {
color: #167ac6;
text-decoration: underline;
}
#UrlSpacer {
color: #666;
font-size: 11px;
font-weight: 500;
}
#VideoThumbnail {
position: relative;
height: 110px;
width: 196px;
}
#VideoTime {
font-size: 15px;
background-color: #000;
color: #fff !important;
height: 14px;
opacity: .75;
filter: alpha(opacity=75);
padding-bottom: 4px;
position: absolute;
bottom: 0;
right: 0;
}
#VideoContainer {
display: inline-block;
}
#VideoIframe {
height: 100%;
width: 100%;
display: block;
border: none;
}
请帮我解决这个问题。
答案 0 :(得分:1)
由于我们没有办法用devtool检查这个,我唯一看到的就是将vertical-align:top;
添加到#VideoContainer。
此外,您必须将id =“VideoContainer”更改为class =“VideoContainer”,因为ID是唯一的。每个ID应该只出现一次,如果它出现多次,则切换一个类的id。