0

仅在 OSX 中发生

在我的导航中，我有一个子菜单，用 css 和 jQuery 完成：

（这只发生在 OSX 中，我在 OSX Lion 10.8 中尝试过，在大多数主要浏览器上）当存在谷歌地图时，该子菜单的字体“缩小”而不是大小，但看起来更薄，我一直在研究位并且可能是字体平滑或字体粗细，但我没有设法修复它。

我在 jsfiddle 中提取了我的代码，因为它足够大，让人感到困惑，html css 和 javascript 都是提取的，我试图最小化代码以使你们更容易。还添加了两个功能非常简单的按钮来添加和删除谷歌地图，所以你可以看到问题，你甚至不必刷新：

http://jsfiddle.net/SGWMx/

我很确定问题出在 gmap/css 上，因为我隔离了它，开始了一个空白页面并开始删除东西，直到我得到它。正如您在示例中看到的那样，我大量减少了 javascript，即使是谷歌地图加载也非常基本，即使它搞砸了我的字体。

function initialize(){

    var coords = new google.maps.LatLng(55.378051, -3.43597299999999);

    var mapOptions = {
        zoom: 5,
        center: coords,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
}

也不是字体本身，因为在我的电脑上我实际上使用的是另一种字体，只需将其设置为 helvetica/arial 以实现兼容性

仅在 OSX 中发生

4

1 回答 1

1

好的，所以实际的问题是 -webkit-transform: translateZ(0);财产#map_canvas和它的孩子。不幸的是，您无法删除它；它被谷歌地图使用。

这个答案可能会让您了解正在发生的事情：How to prevent Webkit text rendering change during CSS transition

因此，根据我的评论，唯一真正的解决方案是避免使用subpixel-aliased.

html {
    -webkit-font-smoothing: antialiased
}
于 2012-11-28T15:33:20.267 回答