光标超出IE10中的文本输入

Question

我在解释这个问题时并不完全清楚正确的术语。但是当我使用IE时，如果使用IE10，光标会超出按钮。在chrome和firefox中它运行正常。 让我分享一下图片：

所以这里。通常，当您键入较长的单词时，边缘将位于单词的结尾部分。但是当使用IE10时，光标会超出，或者更像是搜索到的单词的边缘已经在btn1的后面，并且光标将在btn1之后找到。很抱歉解释这个问题很糟糕。 所以我的问题是如何解决IE10中的问题，使其行为与chrome中的问题相同。

我发现其他IE10的文本输入问题就像拥有此代码一样

        $("input[name=keywords]:text").blur(function (evt){
            var $element = $(this);
            $element.val($element.val());
        });

但仍无效果。

[UPDATE]

    #inputField {
        width: 200px;
        position: absolute;
        top: -5px;
        left: 10px;
        padding: 5px 75px 5px 10px;
    }


    <form . . . style="margin-bottom:0px; display:none; position: relative;">
        <input id="inputField" type="text" />
        <input type="image" src="img/btn2.png" "/>
    </form>

非常感谢任何想法。

[工作周围] 由于IE10忽略了填充，为了保留设计，我调整了输入的宽度......然后用白色div包围它们。

Answer 1

有一个解决这个问题的技巧。您需要为输入字段添加透明背景图像。

input{
   background: url("images/pxImage.gif") repeat scroll 0 0 transparent;
}

下载此小图片：http://i.stack.imgur.com/nPLOM.gif

Answer 2

根据this question：

input[type="text"]::-ms-value {
    /* CSS HERE */
}

似乎很有用。