HTMl CSS IFRAME Link Glitch

>我的网站上有一个页面，它使用 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;
}

请帮我解决这个问题。

由于我们没有办法使用 devtool 检查这一点，我唯一看到的就是将vertical-align:top;添加到 #VideoContainer。

此外，您还必须将id="VideoContainer"更改为class="VideoContainer"，因为ID是唯一的。每个 ID 只应出现一次，如果出现多次，请切换类的 ID。

相关内容

最新更新

热门标签：