css - 将图像作为框架放在 iframe 周围？

Question

我有一个网站，我试图以移动格式显示，但在宽屏幕上显示。我确信 iframe 是要走的路。

我正在尝试将 iframe 加载到 iPhone 的图像中。你可以看到一个例子 here .

一旦你看到它，你应该能够知道我在做什么。

我已经放下了这个 CSS 以允许在 iPhone 屏幕内显示 iframe...

/*iframe Overlay*/
#over{
    position: absolute;
    top: 84px;
    left: 133px;
    width: 485px;
    height: 320px;
}

iframe{
    width: 100%;
    height: 550px;
    background-image: url(../images/iphone5_hollow_750x380.png);
    background-repeat: no-repeat;
}

这是相关的 HTML...

   <div id="over"><iframe src="http://webfro.gs/south/tour"></iframe></div>
        <iframe src="http://www.google.com">
            You don't have iframe support, unfortunately
        </iframe>
    </div>

问题...

我不知道为什么，但我被迫将 iframe 片段与谷歌网站一起保留在那里。如果我将其取出，则手机图像不会显示。

这是为什么？

这是最好的方法吗？有什么更容易的吗？

让它在 IE8 中显示似乎是另一个噩梦。

有什么想法吗？

Answer 1

好的，首先我们需要稍微改变一下 html。所有你需要的是:

<div id="over">
    <iframe src="http://webfro.gs/south/tour"></iframe>
</div>

然后对于 CSS:

#over {
    background-image: url("../images/iphone5_hollow_750x380.png");
    background-repeat: no-repeat;
    height: 380px;
    width: 750px;
    margin: 0 auto 30px;
    position: relative;
}

iframe {
    height: 321px;
    width: 483px;
    position: absolute;
    top: 28px;
    left: 134px;
}