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

Question

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

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

一旦你看到它,你应该能够告诉我正在尝试做什么.

我已经有了这个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;
}