HTML：IE：输入文本框中的右侧填充

Question

转到 http://jsfiddle.net/srLQH/ 并填写“结果”中的输入文本框看法。

如果您在 FF、Chrome 和 Safari 中执行此操作，您的文本将在距右侧 20 像素处停止。

在 IE 7/8 中，文本不会停留在 20px 短处——它一直延伸到输入框的边缘。

和IE有什么关系？如何在 IE 中获得与所有其他浏览器相同的填充效果？

Answer 1

我一直在寻找解决这个问题的方法。一位同事找到了一个解决方案，我们对其进行了测试，效果非常好。因此，问题是删除 padding: right 并添加 border: 20px Solid transparent。

Answer 2

我找到了一种方法，但它并不漂亮。

http://jsfiddle.net/dmitrytorba/dZyzr/162/

<!--[if IE]>
<style type="text/css">
input {
  border: none;
  margin: 5px;
  padding-right: 0px;
}
.wrapper {
    border: 1px #aaa inset;
}
.spacer{
    margin-left: 20px;
}
</style>
<![endif]-->


<span class='wrapper'>
    <input type='text' />
    <span class='spacer'></span>
</span>​

Answer 3

我知道这个问题很老了，但经过大量搜索后，我找到了一个有效的解决方案。

您可以使用以下命令在值上添加边距，从而将“填充”添加回 IE。

默认输入填充

    input[type="text"]{
        padding-left:17px;
        padding-right:17px;
    }

IE 输入的填充

    input[type="text"]::-ms-value {
        margin-left:17px;
        margin-right:17px;
    }

但是您需要删除 IE 10+ 的填充（因此它不会同时使用两者），您可以这样做使用此媒体查询。

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        input[type="text"] {
            padding-left:0;
            padding-right:0;
        }
    }

Answer 4

看起来好像 IE 正在应用 CSS，只是直到该行的最后才应用 CSS。也就是说，填充是受值影响的，而不是值受填充影响。

当将内边距设置为 20px 且默认值比默认宽度长时，您可以滚动到末尾并看到内边距。 http://jsfiddle.net/dZyzr/

你必须想出一些视觉技巧，或者只是为 IE 使用不同的样式表。

Answer 5

只需将其放入另一个在 IE 中进行填充的元素中即可，例如 div。那么你就不必担心丑陋的黑客行为会使你的 CSS 样式表失效。请记住从输入中删除填充，这样就不会惹恼其他浏览器。这也是为文本框提供不随 IE 中的文本滚动的背景图像的唯一方法。

Answer 6

这是一个较旧的问题，但我通过以下方式在 IE10 中修复了此问题：

如何修复此问题对于 IE-10：

::-ms-clear {
  display: none;
}

或对于特定输入：

.anyinput::-ms-clear {
    display: none;
}

请在此处查看更多信息：
http://sarveshkushwaha.blogspot.com/2014 /06/ie-right-align-text-input-issue.html

Answer 7

尝试这个 ie hacks

input{
 padding-right : 20px /* all browsers, of course */  
 padding-right : 20px\9; /* IE8 and below */  
 *padding-right : 20px; /* IE7 and below */  
 _padding-right : 20px; /* IE6 */  
}

演示

http://jsfiddle.net/srLQH/2/

提示

填充不能很好地处理 html 表单元素，即像这样的输入文本区域
尝试将其更改为 margin

input{
 margin-right : 20px /* all browsers, of course */  
 margin-right : 20px\9; /* IE8 and below */  
 *margin-right : 20px; /* IE7 and below */  
 _margin-right : 20px; /* IE6 */  
}

因为在 jsfiddle 中，您只有单个元素，为什么不尝试

ma​​rgin-left 而不是 margin-right

Answer 8

您可以为此元素使用 css 属性 text-indent：

对于示例：

<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />