html - IE 9 输入元素填充问题

Question

我已经多次看到这个话题出现了：你想创建一个搜索框，它的右（或左）角有一个漂亮的图标，看起来它是文本框的一部分，但文本没有写在下面/在它上面，像这样：

（来自铬）

通常人们做的事情是这样的：

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

Stack Overflow 上有几篇关于如何在 IE 上运行的帖子，例如this和this。

但我正在尝试一种不同的方法——如果我不需要的话，我不想包装我的文本框，而是将它作为一种应用于<INPUT>自身的样式。

我想出了这段 CSS： http: //jsfiddle.net/motig/bvV46/4/它适用于 Chrome 和 IE10（经过一些调整）：

太好了，但我也需要支持 IE 9（但不低于那个）。这在 IE 9 上不起作用：

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

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