need same font size for upper and lower case

问题

Html text box should have same font size for both upper and lower case chars.

For example, i have a textbox length of 5 using below css class="field-width-5"

.field-width-5 { width:5px }


<td class="field-width-5">
      <xforms:input bind="alternate-address-1-postal-code" xxforms:maxlength="5" id="alternate-address-1-postal-code-id"/>
</td>

When i enter upper case words such as QWDO, it occupies more space and it exceeds the width of 5px. Is there any font can be applied to over come this issue.

回答1:

You want a fixed-width font like Courier New on Windows. Generically this is the monospace font family in CSS (works on every OS.)

回答2:

have you tried a monospace font like Courier?

回答3:

It has the same font size. The dimensions (height and width) of letters have no simple relationship with the font size; they are up to the font designer.

For an input field for five characters, use the HTML attribute size=5. It’s the safest way—the field may be somewhat wider than needed, but that’s a smaller problem than making it too narrow. Setting e.g. width: 3em in CSS is a reasonable alternative but less safe. Using width: 5ch might seem to be more logical, but it isn’t; first, the ch unit is not widely supported; second, it is by definition the width of the digit 0, and many uppercase letters can be wider.

来源：https://stackoverflow.com/questions/9828734/need-same-font-size-for-upper-and-lower-case