Question

我正在为我朋友的业务整理一个网站，主页包含图片和iframe，但iframe上方和下方都有一个空白区域。我已经尝试过我能找到的每一招，但仍然没有运气。 Screencap：http://i.stack.imgur.com/eBoZs.jpg

HTML：

<!doctype html>
<html>
<div id="center">
<head>
    <title>Inali Grimalkin Sewing and Parties</title>
    <meta charset="UTF-8">
    <link rel=stylesheet href=css/styles.css>
    <meta name=description value="Inali Grimalkin specializes in cosplay, plushies, clothing, and anything that can be made out of fabric.">
    <meta name=keywords value="cosplay, clothing, fabric, sewing, parties, princess, plushies, anime, fandom, conventions">
</head>

<body>

<img src="images/bkg1.jpg" /><a href="shop.html"><img src="images/bkg2.jpg" /></a><a href="gallery.html"><img src="images/bkg3.jpg" /></a><a href="contact.html"><img src="images/bkg4.jpg" /></a>
<img src="images/bkg5.jpg" /><iframe src="indexcontent.html" width="516" height="307" seamless></iframe>

</body>
</div>
</html>

图片的css和上面包含的居中div：

img {
    float: left;
    margin: 0px;
    padding: 0px;
    }

#center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 998px;
    height: 366px;
    margin-left: -499px;
    margin-top: -183px;
    }

iframe链接的页面indexcontent.html包含div id：

#content {
    background: url('../images/bkg6.jpg') fixed;
    margin: 0px;
    padding: 0px;
    }

如何让iframe与其上方的图像齐平？ iframe下面的空白区域不是问题，因为它下方没有图像，但顶部的图像会中断布局。这种情况发生在Chrome和Firefox中，而在Firefox中，iframe会在图像下面而不是在图像旁边。

iframe顶部和底部的空白区域？

0 个答案: