Question

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

Answer 1

不同操作系统上的字体宽度略有不同。您可以做的最好是选择固定宽度的通用字体，因此您在每个系统上使用相同（很好，非常相似）的字体。然后，使用css width: XXXpx;

设置文本框的宽度

我会从这个字体开始：

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

（不确定为什么链接重定向。尝试复制/粘贴它）

这会让你非常接近。

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>

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

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

2 个答案: