2

如果你看下面，我有一个为移动设备设计的网络应用程序的部分截图。在 android 上，我得到一个奇怪的绿色形状，看起来像是一堆堆在一起的字符。我升级到冰淇淋三明治，但同样的事情正在发生。它只在我有我的地图的页面上。

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

它毗邻深绿色森林中的注销链接。

在此处输入图像描述

更新：

我将其范围缩小到 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 浏览器中。

解决方案：

看起来 Android ICS 浏览器不能很好地使用 CSStext-indent: -9999em;

对于我的徽标元素，我有以下 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，问题解决了。

4

1 回答 1

1

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

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

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

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

另一种选择是在样式表中查找具有深绿色颜色样式的元素。将颜色更改为粉红色，并不断缩小 CSS 选择器的范围，直到只有一个元素是粉红色的——这将告诉你这个元素来自哪里以及它是什么（我希望如此）。虽然这是一个相当费力的过程。

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

于 2012-10-30T21:06:57.420 回答