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

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

试试这个 ie 黑客

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 表单元素，即像这样的输入文本区域，尝试将其更改为边距

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

左边距代替右边距