javascript 为什么我的 chrome 地图信息窗口中会出现滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7769765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is a scroll bar coming out in my maps infowindow in chrome?
提问by Spencer Cooley
Here is the JavaScript:
这是 JavaScript：
$(document).ready(function(){
//set location of san antonio
var san_antonio = new google.maps.LatLng(29.4, -98.544);
//set infowindow
var infoWindow;
//object literal containing the properties
var options = {
zoom: 9,
center: san_antonio,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//create the map
var map = new google.maps.Map(document.getElementById('map'), options);
//create marker
var marker = new google.maps.Marker({
position: san_antonio,
map:map,
title: "san antonio"
});
//add 'click' event listener
google.maps.event.addListener(marker, 'click', function(){
//creates infowindow if it already doesn't exist
if (!infoWindow){
infoWindow = new google.maps.InfoWindow();
}
//create content for infowindow
var content = '<div id="information">'+'<img src="http://a1.twimg.com/profile_images/1549555880/Screenshot.png"/>'+'</div>'
//set content of the infowindow.
infoWindow.setContent(content);
//open infowindow on click of marker
infoWindow.open(map,marker);
//ends the event listener
});
//ends the DOM loader
});
In chrome i get an unwanted scroll bar in the infowindow when it pops up. If you look at the bottom right corner you will notice that there is a little bit of distortion as well.
在 chrome 中，当它弹出时，我在信息窗口中得到一个不需要的滚动条。如果您查看右下角，您会注意到还有一点失真。
In Chrome
在 Chrome 中
The infowindow looks great in Firefox. I was not having this problem last night when I was working on my desktop, so I am thinking that my chrome installation may be broken on my laptop. What do you think? Here is what it looks like in FireFox:
信息窗口在 Firefox 中看起来很棒。昨晚我在台式机上工作时没有遇到这个问题，所以我想我的 chrome 安装可能在我的笔记本电脑上坏了。你怎么认为？这是它在 FireFox 中的样子：
In FireFox
在火狐中
I tried doing div#information{overflow:hidden}, but nothing changed
I then tried doing div#information{overflow:hidden;height:500px;background-color:green;}, and then the scroll bar just got longer.
This is telling me that the infowindow is acting as its own div and that the 'information' div's height is causing the infowindow's scroll bar to get larger.
我尝试做div#information{overflow:hidden}，但没有任何改变，然后我尝试做 div#information{overflow:hidden;height:500px;background-color:green;}，然后滚动条变长了。这告诉我信息窗口充当它自己的 div，并且“信息”div 的高度导致信息窗口的滚动条变大。
采纳答案by JellyBelly
Try adding this css style:
尝试添加此 css 样式：
div#information{
overflow: hidden;
}
回答by Rejeesh Prarath
.gm-style-iw{ overflow: hidden !important;}
it works for me
这个对我有用
回答by Tim
回答by tbradley22
may be an issue with line-height. that's what was causing the error for me. see Google Maps API v3: InfoWindow not sizing correctlyanswer #11125793 (Nick).
可能是行高的问题。这就是导致我出错的原因。请参阅Google Maps API v3：InfoWindow 未正确调整大小答案 #11125793 (Nick)。
