html - 谷歌地图 iframe 宽度 ="100%"在 Chrome 中不起作用

Question

我正在使用 iframe 将 Google map 导入我的网站。

我正在使用这段代码:

HTML
<div class="iframe-maps">
    <iframe src="https://www.google.com/maps/d/embed?mid=1Z_DcQ-f4EdnEwL6sRKfLCYCj5P8&hl=en" width="100%" height="100%"></iframe>
</div>

和:

CSS
.iframe-maps {
    width: 80%;
}

我按照另一个帖子的建议在 div 中添加了 iframe，但它没有任何变化。

虽然在 Firefox(移动和桌面)和 Edge(相同)中运行良好，但在 Chrome 中却不行。虽然我不知道 Safari。这似乎很直接。我在这里遗漏了什么吗？

这只是我认为我发现这个问题是这样的:https://www.experts-exchange.com/questions/26706977/Iframe-auto-height-display-problem-in-Safari-Chrome.html但它是从 2010 年开始的……我想这个问题很久以前就已经解决了？

Answer 1

width:80%(父级宽度的 80%)仅在父级已定义宽度(长度或百分比)时有效。这是 CSS 规范。

检查您的 .iframe-maps 的父级，因为我很确定它有 width:auto 或根本没有定义。