Правый выровненный курсив Текст в текстовом поле отключен

У меня есть несколько текстовых полей, которые доступны только для чтения. Я сделал этот текст курсивом, но для числовых полей, где я также правильно выровнял текст, последний номер обрезается. Добавление дополнения только увеличивает размер текстового поля, но не устраняет проблему, как вы можете видеть на изображении (общая стоимость имеет около 20px padding, а стоимость - только 5px). Как я могу исправить это иначе, чем просто избавиться от курсивного текста? Я искал и не нашел ничего, что обращалось к этому, поэтому, если у вас есть ссылка где-нибудь, я был бы счастлив проверить это.

enter image description here

Это не зависит от браузера, поэтому это происходит по всем направлениям, Chrome - тот, который используется для изображения выше и имеет наиболее заметные изменения. Когда страница сначала загружается, она отображается правильно, ничего не отключается. Это часть формы, поэтому, как только вы выбрали другой вариант из раскрывающегося списка, текст внутри этих изменений только для чтения изменится, когда возникает проблема. Почти как если бы он менял стиль, когда был выбран новый вариант. Я не заметил никаких изменений стиля, изменений классов и ничего в коде. Может быть, что-то забыть, но пока ничего не вышло.

Вот jsFiddle: jsfiddle.net/mK6JK

Это не полностью оформлено так же, как проблема, но добавлены основные классы стилей. Проблема в том, что на скрипке он выглядит отлично. Но все еще проблема в моей версии.

Ответ 1

Посмотрите ниже html & css. Я не получаю никаких проблем в любом браузере. Html

<input type="text" class="italic" value="1236" />

Css

.italic{
    font-style:italic;
    padding: 10px;
    text-align: right;
}

http://jsfiddle.net/SqX75/

Ответ 2

вы должны добавить отступ в правую часть текстового поля.

<imput type="text" class="classnum" />

И ADD CSS

.classnum {
    text-align: right;
    font-style: italic;
    padding-right: 3px;
}

Ответ 3

У меня была аналогичная проблема, но с содержанием <div>. я просто добавил width: 110% и это решило мою проблему. надеюсь, что это будет полезно для кого-то другого.

Ответ 4

Насколько я могу судить, это зависит от браузера, и на самом деле нет способа заставить его уйти. Поле ввода - это замещаемый элемент, и на его взгляд и поведение влияет ваша комбинация браузера OS +.

Один из возможных способов обхода заключается в том, чтобы установить свойство letter-spacing на input элементе примерно на 2 или 3 пикселя. Разумеется, это исключает всех персонажей. В зависимости от вашего шрифта и дизайна это может показаться не таким ужасным

То, что я в конечном итоге делал, состояло в том, чтобы обеспечить добавление пространства в конце с помощью Javascript, когда поле изменилось.