为什么我的 chosen.js 放大镜图标在 Retina 屏幕上的位置不正确？

Question

我在同一页面的多个下拉菜单中使用 chosen.js。事实证明，在 Retina 显示器上，搜索字段中的放大镜精灵放错了位置（一堆 X 和箭头一直到输入字段的左侧）。同一下拉列表中的其他精灵看起来还不错。

如果我在 Chrome 中打开网络检查器并尝试 fiddle 背景，我似乎无法移动它。没有任何效果。

例如：

<div class="foo">
    <div class="bar">
        <select class="select1">
            <option value="1">Pick me!</option>
            <option value="1">Pick me!</option>
            <option value="1">Pick me!</option>
            <option value="1">Pick me!</option>
        </select>
    </div>
    <div class="baz">
        <select class="select2">
            <option value="2">Pick me!</option>
            <option value="2">Pick me!</option>
            <option value="2">Pick me!</option>
            <option value="2">Pick me!</option>
        </select>
</div>

.bar input {
    background: #fff !important;
}

请注意第一个 select 中搜索字段中的图标是如何搞砸的。

Here's a fiddle that demonstrates the problem.

非常感谢任何意见。

Answer 1

发生这种情况是因为我有另一个这样定义的规则：

.some-parent input {
    background: #fff !important;
}

其中 .some-parent 是我下拉列表的远祖。此规则将使 chosen.js 中的 Retina 背景规则失效，因为它们是用单一规则定义的（background-image、background-repeat 等）。

解决方案是要么去掉旧规则，要么在一行中重新定义 chosen.js 规则。如果有人有兴趣，这就是它的完成方式：

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) {
    .chosen-container .chosen-search input[type="text"] {
        background: image-url('/static_assets/chosen/chosen-sprite@2x.png') 100% -20px / 52px 37px no-repeat scroll #fff !important;
    }
}

为什么我的 chosen.js 放大镜图标在 Retina 屏幕上的位置不正确？

Why is my chosen.js loupe icon in the wrong place on Retina screens?

javascript

css

jquery

jquery-chosen