Question

我在iframe中嵌入了我的谷歌地图，它在所有浏览器中看起来都很完美，但是当使用safari查看时，谷歌地图顶部有灰色空间，它没有填写宽度边界我设置。为什么呢？

我的编码

<div class="demo-wrapper">
        <iframe src="https://www.google.com/maps/embed?pb=!1m27!1m12!1m3!1d3197457.709806509!2d-98.32007789999999!3d38.498778899999984!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m12!1i0!3e6!4m3!3m2!1d38.8547169!2d-98.2212009!4m5!1s0x87a31771717c016b%3A0x68c2b4a94b3e095f!2sKansas!3m2!1d39.011902!2d-98.4842465!5e0!3m2!1sen!2s!4v1406182467742" width="100%" height="100%" frameborder="0" style="border:0" scrolling="no"></iframe>
</div>

CSS

.demo-wrapper {
border: 3px solid #424242;
width: 485px;
height: 300px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

这是我在不同浏览器中预览时的图像。 https://drive.google.com/file/d/0Bz4nKzGACTZRVEotbXNqU3kxcVU/edit?usp=sharing

Answer 1

尝试将margin:0; and padding:0提供给正文标记。检查 DEMO 。

body {margin:0; padding:0; border:0;}

为什么我的谷歌地图iframe没有填满Safari中的所有空白区域？

1 个答案: