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

【问题标题】：HTML: IE: Right padding in input text boxHTML：IE：输入文本框中的右填充
【发布时间】：2010-09-22 00:13:12
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css internet-explorer padding

【解决方案1】：

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

【讨论】：

这对 ie8 非常有效。 Modernizr 将“ie”类添加到 HTML 元素中，这使得分离 ie hack 变得容易。使用“box-sizing:border-box;”用它。
这也适用于其他流行的浏览器。不需要为 IE 做一个例外。对了，left padding也需要这样处理。
mrust 的答案是真正的解决方案

【解决方案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>

【讨论】：

工作，诚实的回答。谢谢。
mrust 的答案是真正的解决方案

【解决方案3】：

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

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

默认输入填充

输入[类型=“文本”]{ 填充左：17px；填充右：17px； }

IE 输入的填充

输入[type="text"]::-ms-value { 左边距：17px；边距右：17px； }

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

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 输入[类型=“文本”] { 填充左：0；填充权：0； } }

【讨论】：

该死的，这太聪明了。干得好。

【解决方案4】：

似乎 IE 正在应用 CSS，只是直到行尾才应用。也就是padding受值影响，而不是值受padding影响。

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

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

【讨论】：

mrust 的答案是真正的解决方案

【解决方案5】：

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

【讨论】：

mrust 的答案是真正的解决方案
@Wouter 在 2010 年问这个问题的时候，所有的答案都很好，没必要给大家投反对票。
stackoverflow.com/help/privileges/vote-down ：“当你遇到......一个明显......不正确的答案时，请使用你的反对票。”鉴于正确答案，所有其他人显然是不正确的恕我直言。我知道 2010 年的情况并非如此，但我不明白这与今天有什么关系。没有什么私人的;)

【解决方案6】：

这是一个较老的问题，但我在 IE10 中通过以下方式解决了这个问题：

如何为 IE-10 解决这个问题：

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

或者对于特定的输入：

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

【讨论】：

刚刚将其用于 Kendo MaskedTextBox，当其他答案都不合适/不合适时，效果非常好。谢谢:-)
这是问题的真正原因和解决方案。谢谢！

【解决方案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 中，你只有一个元素，你为什么不试试

margin-left 代替 margin-right

【讨论】：

请在提交答案之前检查您的工作。谢谢。

【解决方案8】：

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

对于example：

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

【讨论】：

这怎么没有得到投票？！天哪，网站坏了。我想这是因为他们要求左填充，但我发现这很有用。:)
很高兴看到更有效的解决方案