Question

我想在我的网站上添加传单地图。不幸的是，我自己的CSS文件似乎在某些元素上覆盖了Leaflet的CSS文件。

地图的缩放按钮应如下所示：

但他们现在在我的主页上看起来像这样：

我想知道它是否是我自己的CSS文件覆盖了Leaflet的CSS。但是我该如何防止这种情况呢？看看我的#content a。似乎缩放按钮被解释为链接，因此从我的文件中获取CSS属性。

body {
	background-color: #EFEFEF;
	margin: 0;
	padding: 0;
}

#wrapper {
	width: 1000px;
	padding: 0;
	margin: 0 auto;
}

#content {
	background-color: #FFFFFF;
	width: 700px;
	float: left;
	padding: 0 2.5em 0 2.5em;
	margin: 0;
}

#content p, ol, ul {
	font-family: "Open Sans Condensed", sans-serif;
	color: #444444;
}

#content a:link, #content a:visited {
	color: #C09100;
	text-decoration: none;
}

#content a:hover, #content a:active {
	color: #C09100;
	text-decoration: underline;
}

#map {
	height: 400px;
	width: 100%;
	margin: 0 auto;
}

strong {
	color: #444444;
	font-size: 100%;
	font-weight: bold;
}

h1 {
	color: #444444;
	font: 3em "Amatic SC";
	text-align: center;
}

h2 {
	color: #444444;
	font: 2em "Amatic SC";
	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>

Leaflet map integration：Leaflet的CSS被网站的CSS文件覆盖？

0 个答案: