IE 9输入元素填充问题

Question

我已经多次看到过这个话题了：你想创建一个搜索框，它的右边（或左边）角有一个漂亮的图标，看起来像是它的一部分文本框的内容，但文本不会写在/下面，如下所示：

（来自chrome）

通常人们会这样做：

<div class="searchWrapper">
    <input type="text" />
    <div class="searchIcon"></div>
</div>

Stack Overflow上有几篇帖子涉及在this和this等IE上进行此工作。

但是我尝试了一种不同的方法 - 如果我不需要，我不想包装我的文本框，而是将其作为应用于<INPUT>本身的样式

我已经提出了这个CSS：http://jsfiddle.net/motig/bvV46/4/适用于Chrome浏览器和（在经过一些调整后）在IE10上运行：

很好，但我也需要支持IE 9（但不低于此）。这不适用于IE 9：

由于IE 9（及以下）忽略文本框上的padding。即使我设置了line-height，它也会变得古怪，并且只有当文本框的边缘到达时，文本才会跳回25px。

我能想到的唯一解决方法是使用 condcom 来包装IE 8的文本框。但是，这就像首先包装它一样丑陋。是其他任何解决方案吗？