这只发生在 chrome 上(也许所有 webkit 浏览器?)——当我像这样嵌入 map 时:
<iframe
id="contactsMap"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=<?= $contact['imagePopupAddress'] ?>&aq=&sll=<?= $contact['mapLocation'] ?>&sspn=<?= $contact['mapLocation'] ?>&vpsrc=0&ie=UTF8&hq=&hnear=<?= $contact['imagePopupAddress'] ?>&t=m&z=16&ll=<?= $contact['mapLocation'] ?>&output=embed">
</iframe>
它显示得很好,但如果我创建一个覆盖 map 的 div
,则该 div 中的文本显示全部模糊(图像也一样)。
我尝试过的:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
}
.google-map.google-map-wide
{
-webkit-transform: none !important;
}
我还能尝试什么?
最佳答案
发生模糊是因为您正在使用 skew
转换,然后再使用 skew
返回。更好的方法是使用单独的 dom 元素或伪元素(:before
或 :after
)。类似于 this fiddle
<div style="position: relative">
<iframe id="contactsMap" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=703 8th Ave&aq=&sll=40.758595, -73.988841&&sspn=40.758595, -73.988841&&vpsrc=0&ie=UTF8&hq=&hnear=703 8th Ave&t=m&z=16&ll=40.758595, -73.988841&output=embed"></iframe>
<div class="overlay">
<div class="content">
<span>some text goes here</span>
<a href="#">a random link</a>
</div>
</div>
</div>
#contactsMap {
width: 100%;
float:left;
height:300px;
position:relative;
}
.overlay{height: 300px;}
.overlay:before {
content: '';
display: block;
width:100%;
height:150px;
background:#000;
color:#fff;
position:absolute;
bottom: 0;
-webkit-transform: skew(-9deg);
-moz-transform: skew(-9deg);
-o-transform: skew(-9deg);
transform: skew(-9deg);
}
.content {
top: 150px;
height: 150px;
width: 100%;
position: absolute;
padding: 5px 15px;
}
.overlay a, .overlay span {
color:#fff;
}
关于javascript - 嵌入谷歌地图时文本模糊,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31722045/