右对齐斜体文本框中的文本被截断

Question

我有一些只读的文本框。我已将该文本设为斜体，但对于数字字段，我也正确对齐文本，最后一个数字被截断。添加填充仅使文本框更大但不能解决问题，如图中所示（总成本约为20px填充，而成本仅为5px）。我怎么能解决这个问题，而不仅仅是摆脱斜体文字？我已经搜索过，但没有找到解决这个问题的任何内容，所以如果你有某个链接，我会很高兴看看它。

这不是浏览器特定的，所以它全面发生，Chrome是用于上面图像的那个，并且具有最显着的变化。页面首次加载时，它显示正确，没有任何切断。这是表单的一部分，因此一旦您从下拉列表中选择了另一个选项，这些只读框中的文本就会发生变化，就会发生问题。几乎就像在选择新选项时改变样式一样。我没有注意到代码中的任何样式更改，类更改或任何内容。可能会忽略一些东西，但到目前为止还没有什么突出的。

这是一个jsFiddle：jsfiddle.net/mK6JK

这个问题的风格与问题不完全相同，但添加了主要的样式类。问题是它在小提琴上看起来很好。但是我的生产版本仍然存在问题。

Answer 1

请查看下面的html＆amp; CSS。我在任何浏览器中都没有遇到任何类型的问题。  HTML

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

的CSS

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

http://jsfiddle.net/SqX75/

Answer 2

您必须在文本框的右侧添加填充。

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

并添加CSS

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

Answer 3

据我所知，这取决于浏览器，并没有真正让它消失的方法。输入字段是替换元素，其外观和行为方式受OS +浏览器组合的影响。

一种可能的解决方法是将letter-spacing元素上的input属性设置为大约2或3px。这当然会占用所有角色。根据您的字体和设计，这可能看起来不那么糟糕

我最终做的是确保在字段更改时，最后通过Javascript添加空格。