我目前正在创建一个网站，只有当我添加 css 时我才遇到 map 问题(使用 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>这对某些人来说一定是个愚蠢的问题，但我无法让它工作
最佳答案
似乎所有元素上的 overflow: auto 都弄乱了 google map 。
这应该有效。
#map{
height: 400px;
width: 100%;
overflow: visible !important;
}
关于javascript - 如果我链接我的 css，我网站内的谷歌地图不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55226131/