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

似乎只发生第一个时间，以及城市值超过名称值的项目。这表示您没有为width元素（height）设置img和arrow.png值，因此第一次它不知道它的大小是多少，它随后都会发生。

你应该做的是将它改成背景图像，因为它只是一个图标化的装饰图像，意思是“下一个”或“更多”，因此应该是CSS的风格领域，而不是HTML的含义（其中“img”生活）。请参阅this list of image replacement techniques。

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

Google映射api v3 infobubble css Firefox

1 个答案: