読み取り専用のテキスト ボックスがいくつかあります。そのテキストを斜体にしましたが、数値フィールドではテキストを右揃えにしているため、最後の数字が切り取られてしまいます。パディングを追加するとテキスト ボックスが大きくなるだけで、画像でわかるように問題は解決しません (Total Cost には約 20 ピクセルのパディングがありますが、Cost には 5 ピクセルしかありません)。斜体のテキストを削除する以外に、この問題を解決するにはどうすればよいでしょうか。検索しましたが、この問題に対処する方法が見つかりませんでした。どこかにリンクがあれば、喜んで確認します。
これはブラウザ固有の問題ではないため、すべてのブラウザで発生します。上の画像に使用されているのは Chrome であり、最も顕著な変化があります。ページが最初に読み込まれると、何も切り取られることなく正しく表示されます。これはフォームの一部であるため、ドロップダウンから別のオプションを選択すると、これらの読み取り専用ボックス内のテキストが変わり、問題が発生します。新しいオプションが選択されたときにスタイルが変更されているかのようです。スタイルの変更やクラスの変更、コード内の変更には気付いていません。何かを見落としている可能性もありますが、今のところ目立つものはありません。
jsFiddle はこちらです: jsfiddle.net/mK6JK
これは問題と完全に同じスタイルではありませんが、主要なスタイル クラスが追加されています。問題は、フィドルでは問題なく表示されることです。しかし、私の製品バージョンではまだ問題があります。
ベストアンサー1
テキストボックスの右側にパディングを追加する必要があります。
<input type="text" class="classnum" />
CSS ルールを追加します:
.classnum {
text-align: right;
font-style: italic;
padding-right: 3px;
}