20

我有一些只读的文本框。我已经将该文本设置为斜体，但对于我还右对齐文本的数字字段，最后一个数字被截断。添加填充只会使文本框变大，但不能解决您在图像中看到的问题（总成本大约有 20 像素的填充，成本只有 5 像素）。除了摆脱斜体文字之外，我该如何解决这个问题？我已经搜索并没有找到任何解决此问题的方法，因此如果您在某处有链接，我很乐意查看。

在此处输入图像描述

这不是特定于浏览器的，因此它会全面发生，Chrome 是用于上图的，并且具有最明显的变化。当页面第一次加载时，它会正确显示，没有任何中断。这是表单的一部分，因此一旦您从下拉列表中选择了另一个选项，这些只读框中的文本就会发生变化，这就是问题发生的时候。Almost as if it was changing the styling when a new option was chosen. 我没有注意到任何样式更改、类更改或代码中的任何内容。可能会忽略某些东西，但到目前为止还没有什么突出的。

这是一个 jsFiddle：jsfiddle.net/mK6JK

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

4

4 回答 4

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/

于 2014-07-09T13:04:36.407 回答
1

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

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

并添加 CSS 规则：

.classnum {
    text-align: right;
    font-style: italic;
    padding-right: 3px;
}
于 2015-11-09T16:58:58.220 回答
0

据我所知，这取决于浏览器，没有办法让它消失。输入字段是一个被替换的元素，它的外观和行为方式受您的操作系统+浏览器组合的影响。

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

我最终做的是确保在字段更改时始终通过 Javascript 在末尾添加一个空格。

于 2015-11-09T16:49:11.347 回答
0

我有一个类似的问题，但<div>内容。我刚刚添加width: 110%，它解决了我的问题。希望它对其他人有用。

于 2015-07-15T09:18:37.370 回答