【发布时间】:2012-10-30 19:01:22
【问题描述】:
如果您看下面,我有一个为移动设备设计的网络应用程序的部分屏幕截图。在 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 浏览器不能很好地使用 CSS text-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,问题解决了。
【问题讨论】:
-
很高兴你最终到达了 capdragon。将来我会记住那个文本缩进问题。 (+1)
-
如果我没有听从你关于在不同手机上测试它的建议,就不会到达那里。这样做让我意识到它在所有页面上,而不仅仅是地图。这将可能性缩小到只有网站中常见的元素(徽标是我检查的第一件事)。
标签: android web-applications mobile google-maps-api-3