Перейдите по адресу http://jsfiddle.net/srLQH/ и заполните текстовое поле ввода в "Результат" Посмотреть.
Если вы сделаете это в FF, Chrome и Safari, ваш текст остановится на 20 пикселей меньше правой стороны.
В IE 7/8 текст не останавливается на 20 пикселей — он доходит до края поля ввода.
Что там с IE? Как я могу получить тот же эффект заполнения в IE, который дают мне все другие браузеры?
Я искал способ решить эту проблему. Коллега нашел решение, мы протестировали его, и оно отлично работает. Итак, нужно удалить padding: right и добавить border: 20px solid transparent.
Я нашел один способ сделать это, но он некрасивый.
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>
Я знаю, что этот вопрос старый, но после долгих поисков я нашел решение, которое работает.
Вы можете добавить «заполнение» обратно в 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;
}
}
Похоже, что IE применяет CSS, но не до самого конца строки. То есть на заполнение влияет значение, а не на значение, на которое влияет заполнение.
При установке отступа на 20 пикселей по всему периметру со значением по умолчанию, превышающим ширину по умолчанию, вы можете прокрутить до конца и увидеть отступ. http://jsfiddle.net/dZyzr/
Вам придется придумать какой-нибудь визуальный трюк или просто использовать другую таблицу стилей для IE.
Просто добавьте его в другой элемент, который выполняет отступы в IE, например, в div. Тогда вам не нужно беспокоиться об уродливых хаках, которые сделают вашу таблицу стилей css недействительной. Не забудьте удалить заполнение из ввода, чтобы оно не раздражало другие браузеры. Это также единственный способ дать текстовому полю фоновое изображение, которое не прокручивается вместе с текстом в IE.
Это старый вопрос, но я исправил это в 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
Попробуйте это, т.е. хаки
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 */
}
демонстрация
Советы
отступы не работают с элементом формы 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 у вас есть один элемент, почему бы вам не попробовать
поле слева вместо поля справа
Вы можете использовать свойство css text-indent для этого элемента:
Для примера:
<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />
