css - 隐藏包含 Google map 的嵌入式 iframe 的边框

Question

背景

Google map 有一个默认边框，出于美观原因，我不希望在我们的网站上显示该边框。

目标

我想摆脱它或隐藏它。

代码

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

在 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" 是让谷歌地图边框消失的技巧。