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

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

设置绝对位置后，不会影响流量。这个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;
}

Answer 2

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

DEMO FIDDLE

IE填充右边的问题与输入中的bg图像

2 个答案: