css - 输入文本框宽度和字体宽度

Question

我想创建一个统一的类来设置文本和文本输入框的宽度，以便任何平台都可以内联打印预定义和用户输入的数字。到目前为止，似乎没有办法让输入文本框和字体宽度在所有平台上都相等？

Answer 1

Fonts have slightly different widths on different OS's. Best you can do is to choose a fixed-width universal font, so you use the same (well, very similar) font on each system. Then, set the width of the text box using css width: XXXpx;

I would start with this font:

http://www.google.com/fonts#UsePlace:use/Collection:Droid+Sans+Mono

(not sure why that links redirects. Try copy/pasting it)

That will get you pretty close.

Answer 2

正常内容中的一串数字可能与作为文本输入框的值的一串数字的宽度不同的原因有以下几种：字体可能不同，字体大小可能不同，输入框可能有一些默认情况下填充，一些边距或一些边框。要解决此问题，请显式设置这些属性。例子：

<style>
span, input {
  font-family: Arial, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  border: none;
}
</style>
<span>1234567890</span><br>
<input value=1234567890>

输入框的值将看起来像正常的内容，这是一个严重的可用性问题。为了解决这个问题，为两个元素设置一个相同宽度的边框，但为span:

<style>
span, input {
  font-family: Arial, sans-serif;
  font-size: 100%;
  padding: 0;
  margin: 0;
  border-width: 1px;
}
span {
  border-style: solid;
  border-color: transparent;
}
</style>

（由于transparentvalueborder-color不是普遍支持的，因此使用与封闭元素的背景颜色匹配的特定颜色值可能更安全。）