css - 谷歌地图 api v3 infobubble css Firefox

Question

我有一个带有一些文本和图像的 infoBubble。右对齐图像(箭头)在 Firefox (Mac) 中被下推，但 Safari 或 Opera 则不会，这取决于左侧和上方的文本长度。查看澳大利亚上空的标记:http://www.hostelbars.com/map_test_v3_3.html

这是CSS:

.infowindow {
    background-color: #000;
    color: #FFF;
    font-size: 18px;
    font-family: Helvetica Neue, Helvetica, Arial;
    text-shadow: 0 -1px 0 #000;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}
.infowindow .iwPhoto {
    background-color: #F00;
    position: relative;
    padding-bottom: 1px;
    padding-top: 2px;
    padding-left: 5px;
}
.infowindow .iwName {
    background-color: #0F3;
    line-height: 33px;
    white-space: nowrap;
    position: relative;
    margin-left: 115px;
    margin-top: -70px;
    padding-right: 5px;
    padding-top: 2px;
}
.infowindow .iwCity {
    background-color: #C03;
    line-height: 32px;
    margin-left: 115px;
    padding-bottom: 1px;
}
.infowindow .iwCity .iwArrow {
    background-color: #0CF;
    padding-right: 5px;
    padding-left: 5px;
    margin-top: 3px;
    float: right;
}

除了图像，我不希望 div 具有固定宽度。非常感谢您的帮助。

布兰登

Answer 1

似乎只发生在第一次 时间，并且对于 city 值比 name 值长的元素。这表明您没有为 img 元素 (arrow.png) 设置 width 和 height 值，所以第一次它不知道它的大小，后来它知道了。

您可能应该做的是将其更改为背景图像，因为它只是一个图标化的装饰图像，意思是“下一个”或“更多”，因此应该属于 CSS 的样式领域，而不是HTML 的意义 领域(“img”存在于其中)。参见 this list of image replacement techniques .

否则，您可以只应用 img[src$="arrow.png"] { width: 29px;高度:29px； }，或者将 width 和 height 属性添加到 img 元素。