HTML: IE: правое заполнение в текстовом поле ввода

Ответ 1

Я искал способ решить эту проблему. Сотрудник нашел решение, и мы его протестировали, и он отлично работает. Поэтому нужно удалить padding: right и добавить border: 20px solid transparent.

Ответ 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>​

Ответ 3

Я знаю, что этот вопрос старый, но после большого поиска я нашел решение, которое работает.

Вы можете добавить "отступы" обратно в 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;
        }
    }

Ответ 4

Кажется, что IE -, применяя CSS, только до самого конца строки. То есть на прописку влияет значение, а не значение, влияющее на заполнение.

При настройке отступов на 20 пикселей все по порядку со значением по умолчанию, превышающим ширину по умолчанию, вы можете прокручивать до конца и видеть отступы. http://jsfiddle.net/dZyzr/

Вам придется придумать какой-нибудь визуальный трюк или просто использовать другую таблицу стилей для IE.

Ответ 5

Просто поместите его в другой элемент, который выполняет добавление в IE, например div. Тогда вам не нужно беспокоиться об уродливых хаках, недействительных вашей таблицы стилей CSS. Не забудьте удалить прокладку со входа, чтобы она не раздражала другие браузеры. Это также единственный способ дать текстовому полю фоновое изображение, которое не прокручивается с текстом в IE.

Ответ 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

Ответ 7

Для этого элемента можно использовать свойство css text-indent:

Для пример:

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

Ответ 8

Попробуйте это, например, 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/

Советы

padding не работает хорошо с элементом формы html, т.е. input textarea попробуйте изменить его на 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