HTML: IE: правый отступ в текстовом поле ввода - PullRequest
Новая
       35

HTML: IE: правый отступ в текстовом поле ввода

18 голосов
/ 22 сентября 2010

Перейдите к http://jsfiddle.net/srLQH/ и заполните текстовое поле ввода в представлении «Результат».

Если вы сделаете это в FF, Chrome и Safari, ваш текст остановится на 20 пикселей меньшеправая сторона.

В IE 7/8 текст не останавливается на 20px - он проходит до самого края поля ввода.

Что такое IE?Как я могу получить такой же эффект заполнения в IE, как и все другие браузеры?

Ответы [ 8 ]

7 голосов
/ 05 сентября 2013

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

5 голосов
/ 13 февраля 2012

Я нашел один способ сделать это, но это не красиво.

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 голосов
/ 25 июня 2015

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

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

2 голосов
/ 09 апреля 2015

Это более старый вопрос, но я исправил это в 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

2 голосов
/ 22 сентября 2010

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

2 голосов
/ 22 сентября 2010

Похоже, что IE применяет CSS, но не до самого конца строки. Таким образом, на заполнение влияет значение, а не значение, на которое влияет заполнение.

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

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

0 голосов
/ 27 мая 2014

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

Для пример : 

<input style="text-indent:15px" name="" type="text" value="test testtesttesttesttesttest" />
0 голосов
/ 22 сентября 2010

Попробуйте это, то есть взломать 

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, т. Е. Введите текстовую область, например, попробуйте изменить его на 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

...