在IE中，谷歌自动填充pac-icon模糊不清

Question

感谢我，我能够找到如何设置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设备上运行。