HTML：IE：输入文本框中的右填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3765411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: IE: Right padding in input text box
提问by SnickersAreMyFave
Go to http://jsfiddle.net/srLQH/and fill in the input text box in the "Result" view.
转到http://jsfiddle.net/srLQH/并在“结果”视图中填写输入文本框。
If you do this in FF, Chrome, and Safari, your text will stop 20px short of the right side.
如果您在 FF、Chrome 和 Safari 中执行此操作，您的文本将在距离右侧 20 像素处停止。
In IE 7/8, the text does not stop 20px short--it goes all the way to the edge of the input box.
在 IE 7/8 中，文本不会停止 20px 短——它一直到输入框的边缘。
What's the deal with IE? How can I get the same padding effect in IE that all the other browsers give me?
和IE有什么关系？如何在 IE 中获得与所有其他浏览器相同的填充效果？
回答by Monica
I have been looking for a way to solve this. A colleague found a solution and we tested it and it works perfectly. So the thing is to remove the padding: rightand add a border: 20px solid transparent.
我一直在寻找解决这个问题的方法。一位同事找到了一个解决方案，我们对其进行了测试，效果很好。所以事情是删除padding: right并添加一个border: 20px solid transparent.
回答by Dmitry Torba
I've found one way of doing it, but its not pretty.
我找到了一种方法，但它并不漂亮。
http://jsfiddle.net/dmitrytorba/dZyzr/162/
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>?
回答by ajmccallum
I know this question is old, but after a lot of searching, I found a solution that works.
我知道这个问题很老，但经过大量搜索，我找到了一个有效的解决方案。
You can add the "padding" back to IE by adding margins on the value using the following.
您可以通过使用以下内容在值上添加边距来将“填充”添加回 IE。
default input padding
默认输入填充
input[type="text"]{
padding-left:17px;
padding-right:17px;
}
padding for IE inputs
IE 输入的填充
input[type="text"]::-ms-value {
margin-left:17px;
margin-right:17px;
}
but then you'll need remove the padding for IE 10+ (so it doesn't use both) which you can do with this media query.
但是随后您需要删除 IE 10+ 的填充（因此它不会同时使用两者），您可以使用此媒体查询执行此操作。
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
input[type="text"] {
padding-left:0;
padding-right:0;
}
}
回答by Chewpers
This is an older question, but I fixed this in IE10 by following this:
这是一个较旧的问题，但我通过以下操作在 IE10 中解决了这个问题：
How to fix this it For IE-10 :
如何修复它对于 IE-10：
::-ms-clear {
display: none;
}
Or for a specific input :
或者对于特定的输入：
.anyinput::-ms-clear {
display: none;
}
See more information here: http://sarveshkushwaha.blogspot.com/2014/06/ie-right-align-text-input-issue.html
在此处查看更多信息：http: //sarveshkushwaha.blogspot.com/2014/06/ie-right-align-text-input-issue.html
回答by Robert
It appears as if IE isapplying the CSS, just not until the very end of the line. That is, the padding is influenced by the value, rather than the value influenced by the padding.
看起来好像 IE正在应用 CSS，只是直到行的最后。即padding受值影响，而不是值受padding影响。
When setting the padding to 20px all the way around with a default value longer than the default width, you can scroll to the end and see the padding. http://jsfiddle.net/dZyzr/
当将内边距设置为 20px 且默认值大于默认宽度时，您可以滚动到末尾并查看内边距。http://jsfiddle.net/dZyzr/
You're going to have to come up with some visual trick, or just use a different style sheet for IE.
您将不得不想出一些视觉技巧，或者只是为 IE 使用不同的样式表。
回答by Randy the Dev
Just chuck it in another element which does do padding in IE, such as a div. Then you don't need to worry about ugly hacks invalidating your css stylesheet. Remember to remove the padding from the input so it doesn't annoy other browsers. This is also the only way to give a text box a background image which doesn't scroll with the text in IE.
只需将它放入另一个在 IE 中进行填充的元素，例如 div。那么您就不必担心丑陋的黑客使您的 css 样式表无效。请记住从输入中删除填充，以免打扰其他浏览器。这也是为文本框提供不随 IE 中的文本滚动的背景图像的唯一方法。
回答by Pramendra Gupta
Try this ie hacks
试试这个
input{
padding-right : 20px /* all browsers, of course */
padding-right : 20px; /* IE8 and below */
*padding-right : 20px; /* IE7 and below */
_padding-right : 20px; /* IE6 */
}
demo
演示
Tips
提示
padding dont work well with html form element ie input textarea like that try changing it to margin
填充不适用于 html 表单元素，即像这样输入 textarea 尝试将其更改为边距
input{
margin-right : 20px /* all browsers, of course */
margin-right : 20px; /* IE8 and below */
*margin-right : 20px; /* IE7 and below */
_margin-right : 20px; /* IE6 */
}
since in jsfiddle , you have single element, why dont you try
因为在 jsfiddle 中，你只有一个元素，你为什么不试试
margin-left instead of margin-right
margin-left 而不是 margin-right
