Question

转到http://jsfiddle.net/srLQH/并在“结果”视图中填写输入文本框。

如果您在FF，Chrome和Safari中执行此操作，您的文字将会在距离右侧20px的位置停止。

在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

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

您可以添加＆＃34;填充＆＃34;通过使用以下内容在值上添加边距来返回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，直到最后一行。也就是说，填充受值的影响，而不是受填充影响的值。

当使用长于默认宽度的默认值将填充设置为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

试试这个，即黑客攻击

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表单元素，即输入textarea 尝试将其更改为 保证金

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中，你有单个元素，为什么不尝试

margin-left而非margin-right

Answer 8

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

example：

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

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

8 个答案: