css - Google Autocomplete pac-icon 在 IE 中模糊

Question

多亏了 SO，我才能够找到如何设计 Google 自动完成下拉菜单的样式。我已将默认标记更改为:

.pac-icon { 
  background-image: url(images/marker_greyed.png);
  background-position:center; 
  background-repeat:no-repeat; 
  background-size:16px 20px; 
  border:none; 
}

这对更改图标非常有效。但是，我遇到了一个很好的旧 IE 问题，因为前几个建议的标记有点模糊:

将其与 Chrome 进行比较:

有谁知道我可以做什么来锐化 IE 中的背景图像？我试过预加载图像，认为这可能是因为图像在页面加载时隐藏了，但这也不起作用。

非常感谢!

Answer 1

好的，所以我决定升级我的大脑并进行一些解码，基于一些关于能够使用 Chrome 检查元素的谷歌搜索。

标记包含在以下范围内:

<span class="pac-icon pac-icon-marker"></span>

对应的css样式为:

.pac-icon-marker {
  background-position: -1px -161px;
}
.pac-icon {
  width: 15px;
  height: 20px;
  margin-right: 7px;
  margin-top: 6px;
  display: inline-block;
  vertical-align: top;
  background-image: url(//maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
  background-size: 34px;
}

请注意，使用移动浏览器时，他们进行了一项更改，即 .pac-icon 样式，如下所示:

.hdpi .pac-icon {
  background-image: url(//maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png);
}

所以我所做的是将这些元素复制并粘贴到我的样式表中，编辑它们以允许我的背景图片，上传样式表，然后嘿，新标记在 IE 和移动浏览器中都可以工作。

我已经通过 chrome 仿真工具测试了这些更改，它们似乎可以在 iOS 和 Android 设备上运行。