1

我想在我的网站上嵌入 zumi.pl 地图。他们的地图通过 js 加载到具有特定 id 的 div 并且依赖于外部 css。但是，我用于在内部格式化 div 的 cssdiv#content会干扰嵌入式地图，从而将其全部搞砸。我试图用上下文 css 重置将它包含在另一个 div 中，但它仍然显示错误。使其（几乎）正确显示的唯一方法是在 Firefox 检查器中取消选中该 div 的所有 css 规则，但我无法弄清楚如何在页面上实现相同的效果。为清楚起见，这是来自其生成器的示例复制和粘贴代码：

    <div id="zumiMap" class="zumi_creator" style="width:300px; height:300px;"></div>
<script src="http://api.zumi.pl/maps/api" type="text/javascript" ></script><script type="text/javascript">(function(){var marker,map=new zumi.maps.Map("zumiMap", {"apiKey": "E48EF8E55A0B3BEAE0434628AE0A1EEA"});map.afterLoad(function() {document.getElementById("zumiMap").className += " zumi_creator";map.addMarker({lat: 52.214679,lng: 21.021101},{letter: "A", type: "main"});map.setCenter({lng: 21.021101,lat: 52.214679}, 7);});})();</script>

这是我的css，这是罪魁祸首：

#content div {
    display: inline;
    float: left;
    margin: 0px 0.833333%;
    padding-left: 10px;
}

如何隔离 html 片段，使其表现得像以前没有 css 规则一样？但不使用 iframe。

4

1 回答 1

1

你试过这个吗？ #content #zumiMap div将比您的#content div选择器具有更高的特异性，因此您可以重置所有问题样式。

#content #zumiMap div {
    display: block;
    float: none;
    margin: 0;
    padding-left: 0;
}
于 2013-08-26T14:13:39.733 回答