隐藏包含 Google 地图的嵌入式 iframe 的边框

Question

背景

谷歌地图有一个默认边框，出于美观原因，我不想在我们的网站上显示。

客观的

我想摆脱它或隐藏它。

代码

到目前为止，我所做的是删除嵌入代码中的默认高度和宽度。然后添加一个较小的包装器，以便嵌入将延伸到它之外并且不显示。

在 Inspect Element 我看到边框是 1px。但是仅仅将<iframe>2px 变大并将 -1px 放在外面并不足以将其删除。所以我最终做了 102%，但它没有我想要的那么精确。在这一点上它是功能性的，没有人会真正注意到，但它是一种“临时解决方法”

HTML

<div class="map-footer-wrap">
  <iframe src="https://mapsengine.google.com/map/embed?mid=zIn_bb78zyjU.kVqzAS1cS9qg" border="0"></iframe>
</div>

CSS

.map-footer-wrap {
  height: 400px;
  overflow: hidden;
  position: relative
}

.map-footer-wrap iframe {
  width: 102%;
  height: 102%;
  position: absolute;
  top: -1%;
  left: -1%;
}

Answer 1

简单地使用frameborder="0"而不是border="0"使谷歌地图边框消失的技巧。