指定字体时 HTML 输入框对于数据来说太宽

Question

权力要求我们某些表单上的输入字段使用粗体文本。问题是在样式表中这样做的天真方式:

input {
    font-weight: bold;
}

使用这个 HTML:

1234567890
<input type="text" maxlength="10" size="10" value="1234567890"/>

导致了一个直接的问题:现在所有的输入框都太宽了。

我已将其缩小到 Yahoo 重置，它告诉输入框从父项(文档正文)font: inherit。这是我想要的行为——输入框与父主体具有相同的字体。但是一旦我指定字体，或者使用继承，输入框又太宽了。这在 IE 和 Firefox 中都是一样的，所以这可能不是浏览器兼容性问题。

查看实际效果:http://jsfiddle.net/clintp/bZChP/3/

我如何指定输入框的字体，但它们的大小合适？

更新:“适本地”http://jsfiddle.net/clintp/bZChP/5/ 右侧的输入小部件的大小适合其数据，而左侧的则不然。目标是让两个框具有相同的大小、相同的文本字体 [其中一个是粗体!]，而不必逐个字段地为应用程序字段中的每个输入框指定框大小。 (有数千个。)

Answer 1

在实践中，除非使用等宽字体，否则无法可靠地调整输入字段的大小。即使对于单行字体，浏览器在计算字段宽度时也有错误。如果仅在 HTML 中使用 size 设置可见宽度，可能会获得最一致的结果。属性，然后在 CSS 中设置字体大小和系列，列出似乎工作正常的等宽字体。例如，

输入 { 字体:100% Lucida Console，等宽；

这将解决某些浏览器上的问题，例如<input size=10>产生一个大约 12 个字符宽的字段。

关于输入框与父体字体相同的要求，那么你也需要在父体中使用等宽字体。 ☺ 说真的，虽然我们应该也能够使用比例字体设置输入字段的宽度，但事情就是行不通。即使是支持 ch 的浏览器单位(如果它有效的话，这将是数字输入的问题)不一致和不正确地做到这一点，因此设置例如width: 10ch即使输入 0000000000 也不会给出正确的渲染。