输入中的 bg 图像的 IE 填充正确问题答案

【问题标题】：IE padding-right issue with bg image in input输入中的 bg 图像的 IE 填充正确问题
【发布时间】：2014-02-28 06:43:40
【问题描述】：

我在使用 IE 浏览器时遇到问题（IE 10 之前的所有版本）。 Issue

输入框中的文本与其背景图像重叠。我不能将此图像放在父 div 中，因为它是一个动态输入框并具有许多其他功能。我不能将文本框的宽度增加到 100 像素以上，值约为 50 个字符。

请帮忙。

CSS

.some {
background:url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png) no-repeat right center;
padding:1px 15px 1px 1px;
border:1px solid #ccc;
width:100px;
color:red;
overflow:hidden;}

HTML

<input type="text" class="some" value="I am a messy input box" />

【问题讨论】：

如果将内边距增加到 30 .. padding:1px 30px 1px 1px; .. 会移动您的图像吗？
@PellePanna：不，它只是增加了输入框的宽度，文本与图像重叠。实际上我不能将文本框的宽度增加超过 100 像素，值约为 50 个字符。谢谢
根据 sanjeev 的回答，增加右填充。它会很酷。
您需要支持哪些版本的IE？ .. 8 或 9，或两者兼有..
@PellPenna：至少从 ie8 到 ie 10

标签： html css internet-explorer input

【解决方案1】：

用 IE8 试试这个演示：http://jsfiddle.net/74u4w/2/

如果可行，只需将边框添加到图像中即可修复

.some {
    background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
    background-position: 105px -6px;
    background-repeat: no-repeat;
    padding: 1px 1px 1px 1px;
    border: 1px solid #ccc;
    border-right: 25px solid transparent;
    width: 100px;
    color: red;
    overflow: hidden;
}

如果没有，那么最后的手段是在您的输入后附加一个 img/div 的小型 javascript。（可以动态完成）

设置了绝对位置，不会影响流量。这个 CSS 示例展示了它的外观：

.some {
    padding: 1px 1px 1px 1px;
    border: 1px solid #ccc;
    width: 80px;                   /* narrowed to fit img */
    color: red;
    overflow: hidden;
}
.someimg {
    background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    overflow: hidden;
    left: ?px;            /* needs to be calculated based on each input */
    top: ?px;             /* needs to be calculated based on each input */
    width: 20px;
    height: 20px;
}

【讨论】：

尽可能完美，因为没有其他方法可以在 IE 中修复它.. 很好，它适合你
其实与现有布局完美。非常感谢。

【解决方案2】：

减少input字段width并从右侧添加padding

演示FIDDLE

【讨论】：

签入 IE @Girish，它仍然与图像重叠。
@Era 在 IE 浏览器中无法使用，您可以添加span 或其他元素作为搜索图标...
@Era，你为什么要这样做？，如果你已经完成了，那么你也不能在search icon上附加任何事件..