谷歌地图iframe width =“100％”在Chrome中不起作用

我正在使用iframe将Google地图导入到我的网站。谷歌地图iframe width =“100％”在Chrome中不起作用

我使用这个代码：

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年...我想这个问题已被修复很久以前？

来源

2017-10-07 sheep

确切的问题是什么？在Chrome和Firefox中看起来都很相似。 – curveball

如果使用相对宽度，不确定是否相关，但通常“canvas”，“svg”和“iframe”类型的dom在设置高度时表现更好。 –

width:80%（父宽度的80％）仅在父级已定义宽度时起作用 - 长度或百分比。这是由CSS规范。

检查您的.iframe-maps的父母，因为我非常肯定它有width:auto或根本没有定义。

来源

2017-10-07 23:59:32

谢谢！这是问题。显然，Firefox并不在乎，但Chrome确实如此。即使向第一个父母添加'height：1px;'也能解决此问题。 – sheep

该代码确实有效，请尝试updating chrome。

来源

2017-10-07 23:28:32 Tom

已经尝试过这种方式，不幸，不幸。 – sheep

谷歌地图iframe width =“100％”在Chrome中不起作用

回答

相关问题