Question

我当前正在创建一个网站，仅在添加CSS时，我才遇到地图问题（使用google maps api），我尝试搜索并调查自己，唯一相关的是，如果我删除了指向我的样式表出奇的效果

index.css：

* {
  margin: 0;
  padding: 0;
  overflow: auto;
}

.left {
  float: left;
}

.right {
  float: right;
}


/* Header */

header {
  position: relative;
  background-color: #FFFFFF;
}

header nav {
  background-color: #FFFFFF;
  padding: 2em;
}

img.logo {
  max-width: 100px;
  height: auto;
  position: relative;
  padding-right: 2.5em;
  padding-left: 2.5em;
  display: block;
  color: #FFFFFF;
}

header nav ul {
  font-size: 1.5em;
}

ul:hover {
  border-bottom-style: solid;
  border-bottom-color: #00aa00;
  border-bottom-width: 3px;
}

header nav ul a {
  padding: 1em;
  vertical-align: middle;
  text-decoration: none;
  padding-right: 2.5em;
  padding-left: 2.5em;
  display: block;
  color: #00aa00;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <style>
    /* Set the size of the div element that contains the map */
    
    #map {
      height: 400px;
      /* The height is 400 pixels */
      width: 100%;
      /* The width is the width of the web page */
    }
  </style>
  <meta charset="UTF-8">
  <title>Trium</title>

</head>

<body>
  <h3>My Google Maps Demo</h3>
  <div id="map"></div>
  <script>
    function initMap() {

      var uluru = {
        lat: -25.344,
        lng: 131.036
      };

      var map = new google.maps.Map(
        document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });

      var marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9iEOQtdERdBOcdQz7zywVPXaJ6jMfNQE&callback=initMap">
  </script>
</body>

</html>

对于某些人来说，这肯定是一个愚蠢的问题，但我无法使其正常工作

Answer 1

似乎所有元素上的overflow: auto都迷住了Google地图。这应该起作用。

#map{
    height: 400px;
    width: 100%;
    overflow: visible !important;
}

如果我链接CSS，我网站内的Google地图无法正常工作

1 个答案: