HTML: IE: Right padding in input text box

问题

Go to http://jsfiddle.net/srLQH/ and fill in the input text box in the "Result" view.

If you do this in FF, Chrome, and Safari, your text will stop 20px short of the right side.

In IE 7/8, the text does not stop 20px short--it goes all the way to the edge of the input box.

What's the deal with IE? How can I get the same padding effect in IE that all the other browsers give me?

回答1:

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: right and add a border: 20px solid transparent.

回答2:

I've found one way of doing it, but its not pretty.

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>

回答3:

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.

default input padding


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

padding for IE inputs


    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.


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

回答4:

It appears as if IE is applying 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.

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/

You're going to have to come up with some visual trick, or just use a different style sheet for IE.

回答5:

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.

回答6:

This is an older question, but I fixed this in IE10 by following this:

How to fix this it For 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

回答7:

Try this 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 */  
}

demo

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

Tips

padding dont work well with html form element ie input textarea like that try changing it to 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 */  
}

since in jsfiddle , you have single element, why dont you try

margin-left instead of margin-right

回答8:

You can use css property text-indent for this element:

For example:

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

来源：https://stackoverflow.com/questions/3765411/html-ie-right-padding-in-input-text-box

标签

html

css

internet-explorer

padding