谷歌地圖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中不起作用

回答

相關問題