我想为我的网站添加一个Leaflet地图。不幸的是,我自己的CSS文件似乎在某些元素上覆盖了Leaflet的CSS文件。传单地图集成:传单的CSS被网站的CSS文件覆盖?
地图的缩放按钮应该是这样的:
但他们现在这个样子在我的主页:
我不知道这是我自己的CSS文件覆盖Leaflet中的CSS。但是,我怎么能阻止呢?看看我的#content a
。看起来像缩放按钮被解释为一个链接,所以从我的文件中获取CSS属性。
body {
\t background-color: #EFEFEF;
\t margin: 0;
\t padding: 0;
}
#wrapper {
\t width: 1000px;
\t padding: 0;
\t margin: 0 auto;
}
#content {
\t background-color: #FFFFFF;
\t width: 700px;
\t float: left;
\t padding: 0 2.5em 0 2.5em;
\t margin: 0;
}
#content p, ol, ul {
\t font-family: "Open Sans Condensed", sans-serif;
\t color: #444444;
}
#content a:link, #content a:visited {
\t color: #C09100;
\t text-decoration: none;
}
#content a:hover, #content a:active {
\t color: #C09100;
\t text-decoration: underline;
}
#map {
\t height: 400px;
\t width: 100%;
\t margin: 0 auto;
}
strong {
\t color: #444444;
\t font-size: 100%;
\t font-weight: bold;
}
h1 {
\t color: #444444;
\t font: 3em "Amatic SC";
\t text-align: center;
}
h2 {
\t color: #444444;
\t font: 2em "Amatic SC";
\t text-align: center;
}
<html>
<head>
<!-- Link to Leaflet's CSS file: -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<!-- My own CSS file: -->
<link rel="stylesheet" type="text/css" href="rumkommenstyle.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="JS/Leaflet.MakiMarkers.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="map">
<script type="text/javascript">
var layer = new L.StamenTileLayer("watercolor");
var map = new L.Map("map", {
center: new L.LatLng(56.074207, -3.376634),
zoom: 6
});
var icon = L.MakiMarkers.icon({
icon: "marker",
color: "#900",
size: "m",
});
map.addLayer(layer);
L.marker([56.074207, -3.376634], {
icon: icon,
title: 'Crossgates, Fife, Scotland',
alt: 'Crossgates, Fife, Scotland',
}).addTo(map);
</script>
</div>
</div>
</div>
</body>
</html>
谢谢!我改变了所有的id到类,但不幸的是,这并没有解决我有关缩放按钮的问题。我不得不离开“地图”div作为id,否则它不会被脚本识别。也许这就是为什么? –
我转载了你的问题,我可以看到我的回答没有解决它。我希望找到一个有效的解释。 – YaFred
再次感谢您的解释。如前所述,我已将所有其他div(除“map”)更改为类。所以它现在是'.content',而不是'#content'了。我添加了'.leaflet-bar> a:link {color:#000; text-decoration:none;}'到我的CSS,但它没有改变任何东西:( –