嵌入谷歌地图的iFrame CSS边框半径不起作用 [英] CSS border-radius on iFrame embedding google maps, not working
问题描述
我的网站上有一个按钮，点击后会显示/隐藏谷歌地图div（使用iframe嵌入）。它工作正常，除了border-radius只在jquery动画中工作。一旦动画完成，iframe就会变成方形。
HTML
< div id =layer-2>
< span id =moreInfo>
< / span>
< / div>
<按钮>显示< /按钮>
Javascript
< $（$$）$（$）$（$）$ $ $ $ $ $ $ $ $ $ $ $ $' （opality））.css（opacity）））{
$（button）.text（Show）;
$（＃moreInfo）。css（{opacity：1， top：0，height：200，display：'inline'}）;
$（＃moreInfo）。animate（{opacity：0，top：100，height：100}，100，function（）{ $（＃moreInfo）。hide（）;}）;
} else {
$（button）。text（Hide）;
$（＃moreInfo ）.css（{opacity：0，top：100，height：100，display：'inline'}）;
$（＃moreInfo）。show（）;
$（＃moreInfo ）.animate（{opacity：1，top：0，height：200}，100）;
}
}）;
}）;
CSS
#moreInfo {
position：absolute;
opacity：0;
top：0px;
left：10px;
width：300px;
height：200px;
background-color：blue;
border-radius：50％;
}
＃layer-2 {
height：200px;
}
body {
background-color：#aaa;
}
注意：请不要标记重复，我已经通过了一些堆栈溢出的答案，但没有一个帮助。另外请不要为任何其他Google Maps提供api集成建议，我需要使用iFrame实现。
span 元素使用 overflow：hidden; 作为你的 iframe 溢出了 span 元素，并且由于您没有 border-radius 应用于iframe，它呈现为一个矩形块... #moreInfo {
位置：绝对;
opacity：0;
top：0px;
left：10px;
width：300px;
height：200px;
background-color：blue;
border-radius：50％;
overflow：hidden;
}
如果您不想为父项使用 overflow：hidden; ，那么比使用 border-radius 为 iframe 以及...摆脱蓝色 背景颜色 ...
#moreInfo iframe {
border-radius：50％;
}
演示2 （As 你评论过的，在Chrome上失败，很快就会查看）
I have a button on my site, on clicking it will show/hide a google map div (embedded using iframe). It is working fine except the border-radius is working only during jquery animate. Once the animation is done, the iframe becomes square.
HTML
<div id="layer-2">
<span id="moreInfo">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12242.306455925878!2d-75.12138282383809!3d39.90611059880662!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x3e48fdca1ebac4d0!2sWalt+Whitman+Bridge!5e0!3m2!1sen!2sin!4v1395728987250" width="300" height="200" frameborder="0" style="border:0"></iframe>
</span>
</div>
<button>Show</button>
Javascript
$(function () {
$("button").on("click", function () {
if(parseInt($("#moreInfo").css("opacity"))) {
$("button").text("Show");
$("#moreInfo").css({opacity:1,top:0,height:200,display:'inline'});
$("#moreInfo").animate({opacity: 0,top: 100,height: 100}, 100, function () {$("#moreInfo").hide();});
} else {
$("button").text("Hide");
$("#moreInfo").css({opacity:0,top:100,height:100,display:'inline'});
$("#moreInfo").show();
$("#moreInfo").animate({opacity: 1,top: 0,height: 200}, 100);
}
});
});
CSS
#moreInfo {
position: absolute;
opacity: 0;
top: 0px;
left: 10px;
width: 300px;
height: 200px;
background-color: blue;
border-radius: 50%;
}
#layer-2 {
height: 200px;
}
body {
background-color: #aaa;
}
Note: Please don't mark this duplicate, I have gone through a number of stack overflow answers, but none of them helped. Also please don't suggest for any other google maps api integration, I need to use the iFrame implementation.
It does work, you need to use overflow: hidden; for the span element as your iframe overflows out of the span element, and since you don't have border-radius applied on the iframe, it renders as a rectangle block...
#moreInfo {
position: absolute;
opacity: 0;
top: 0px;
left: 10px;
width: 300px;
height: 200px;
background-color: blue;
border-radius: 50%;
overflow: hidden;
}
If you don't want to use overflow: hidden; for the parent, than use the border-radius for the iframe as well... and get rid of blue background color...
#moreInfo iframe {
border-radius: 50%;
}
Demo 2 (As you commented, fails on Chrome, will look into it soon)
这篇关于嵌入谷歌地图的iFrame CSS边框半径不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
