Google Maps InfoWindow未在Firefox中显示完整文字

Question

我正在here中使用可用的代码fiddle here。

问题是信息窗口中的文字显示如下：

应该说：你在这里。 （单行）

使用Firebug，我将文本的父样式更改为宽度为75px，然后在信息窗口的文本中出现水平滚动条。我试图使用Firebug隐藏滚动条并且它工作正常但是当我把它放在代码中时，滚动条又出现了。

CSS：

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: arial;
    font-size: 62.5%;        /* so, 10px = 1rem */
}

#button-container{
}

button{
    color: white;
    background: #4196c2;
    border: 0rem;
    border-radius: 0rem 0rem 0.5rem 0.5rem;
    padding: 0.5rem;
    outline: none;
    display: block;
    margin: 0 auto;
}

#show-hide{
    height: 1.5rem;
    line-height: 0;
}

#map-canvas{
    z-index: -1;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.gm-style-iw div{
    /*width: 75px;
    overflow: hidden;*/
}

.gm-style-iw div div{
/*    overflow: hidden;*/
}

我该如何解决这个问题？

Answer 1

您可以通过在内容中添加带内联样式的html来控制infoWindow内容宽度，如下所示：

var infowindow = new google.maps.InfoWindow({
    map: map,
    position: pos,
    content: '<div style="width: 75px">You are here.</div>'
});

此宽度会动态更改并放入优先于css的内联样式，这就是为什么即使在css中进行更改时它也会被覆盖