在Android谷歌地图网络应用程序上发生的奇怪的事情

Question

如果你看下面，我有一个专为移动设备设计的网络应用程序的部分截图。在Android上我得到一个奇特的绿色形状，看起来像一堆字符堆叠在一起。我升级到Ice Cream sandwitch，但同样的事情正在发生。它只在我有地图的页面上。

有没有人见过这样的事情或知道可能是什么造成的？

它与森林深绿色的Log Off链接相邻。

更新

我将其缩小到Google Maps API v3。它发生在我调用构造函数时，但我仍然不知道如何解决它或摆脱它。

var map = new google.maps.Map(document.getElementById('map'), {
    'zoom': 16,
    'center': new google.maps.LatLng(39.205316, -96.305485),
    'mapTypeId': google.maps.MapTypeId.HYBRID,
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    },
    mapTypeControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM,
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }, 
    streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    },             
    panControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    }                      
});

更新＃2：

尝试使用Chrome Mobile进行调试，但它没有显示出来。仅显示在Android ICS浏览器中。

---

SOLUTION：

看起来Android ICS浏览器不适合使用CSS text-indent: -9999em;

对于我的logo元素，我有以下html：

<hgroup>
    <h1><a href="Default.aspx#main">Company Name</a></h1>
</hgroup>

/* Logo */
header hgroup {
    background: url("../imgs/logo_143x60.png") no-repeat scroll 0 0 transparent;
    display: block;
    height: 60px;
    left: 0;
    position: absolute;
    top: 6px;
    width: 312px;
}
header hgroup h1 a {
    text-indent: -9999em;
    display: block;
    height: 60px;
    width: auto;
}
header hgroup h3  {
    text-indent: -9999em;
    height: 0;
}

我只是删除了文字Company Name，解决了问题。

Answer 1

没有链接，我在这里工作是盲目的，但如果不是你的代码直接造成的 - 我会猜测并说它可能是你设备上的应用程序的结果？例如，我知道一些sat导航应用程序将地址转换为超链接（打开sat导航应用程序）。由于它位于有地图的页面上，因此这个理论听起来很合理。

评估Firebug / Web Inspector中的违规元素以获取更多线索。

<强>更新 在发现它只发生在Android浏览器中后，我会尝试一些步骤来帮助缩小根本因果关系。

让您的朋友/同事/模拟者复制此问题。如果它是间歇性的，或仅适用于您自己的设备 - 这听起来像是流氓应用程序将文本解析为链接或类似内容的行为。了解哪个违规应用程序将有助于追踪问题所在。

另一种选择是在样式表中找到具有深绿色颜色样式的元素。将颜色更改为粉红色，并继续缩小CSS选择器的范围，直到只有一个元素为粉红色 - 这将指示此元素来自何处以及它是什么（我希望）。这是一个非常费力的过程。

在Android浏览器中可能有更好的方法来调试这样的东西，但不幸的是我不知道它们。祝你好运！