1

这只发生在 chrome 上（也许所有的 webkit 浏览器？） - 当我像这样嵌入地图时：

<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>

它显示得很好，但如果我创建一个div覆盖地图的，该 div 中的文本会显示所有模糊（以及图像）。

我试过的：

* {
  -webkit-font-smoothing: subpixel-antialiased !important;
}
.google-map.google-map-wide 
{ 
  -webkit-transform: none !important;
}

我还能尝试什么？

编辑 http://jsfiddle.net/31pxt917/

4

1 回答 1

0

发生模糊是因为您正在使用skew转换然后skew返回。更好的方法是使用单独的 dom 元素或伪元素（:before或:after）。像这样的小提琴

<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;
}
于 2015-07-30T11:47:05.320 回答