Question

目前使用Bootstrap构建Wordpress主题。现在，我通过jQuery嵌入了一个Google Map，因此它在指定的div中加载：

<div id="map" class="img-responsive img-circle"></div>

我已将img-responsive和img-circle应用于所述div，以便地图显示为圆形，并在按设备缩小时响应。地图很漂亮，在Chrome和Firefox中工作得很好，但在Safari（8.0.8）中却没有。

它看起来像这样：

Answer 1

此代码已在safari，chrome，mozila等上验证。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
    iframe{
        -moz-border-radius:250px;
        -webkit-border-radius:250px;
        -o-border-radius:250px;
        -ms-border-radius:250px;    
        border-radius:250px;
    }
</style>
</head>

<body>
    <div class="map-image">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3635689.793072721!2d80.8833819!3d27.141237!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30635ff06b92b791%3A0xd78c4fa1854213a6!2sIndia!5e0!3m2!1sen!2sin!4v1441046961837" width="500" height="500" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
</body>

</html>

Answer 2

但是我已经在safarr中检查了它..参见附图

用于嵌入式Google地图的Bootstrap img-circle在Safari中无法正常工作

2 个答案: