html - IE padding-right issue with bg image in input

Question

我遇到了 IE 浏览器的问题(IE 10 之前的所有版本)。 <强> Issue

输入框中的文本与其背景图像重叠。我不能将此图像放在父 div 中作为动态输入框并具有许多其他功能。并且我不能将文本框的宽度增加到 100px 以上，值大约为 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" />

Answer 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;
}