Question

我必须将以前在文本模式下在系统控制台中运行的旧应用程序移植到HTML5。

HTML5中的布局必须模仿旧行为，即字体必须是等宽的，表单，字段和文本的尺寸必须是字符宽度或高度的倍数。

到目前为止，通过使用absolute定位以及为font，font-size，line-height精心挑选的值，我可以得到几乎令人满意的结果。

对于元素的高度，我在em中指定了我的值，所以一切都到位了。但是，我找不到一种方法来轻松处理元素宽度。

假设我有一个标签，一个文本输入和一个右下方的div，它必须具有相同的确切宽度。标签长度为7个字符，因此输入也应为7个字符。

类似的东西：

mylabel
[input]
[mydiv]

但是，当使用em作为字符宽度时，我会得到以下布局：

mylabel
[input way too large]
[mydiv way too large]

显然，因为em表示基本字符高度，而不是宽度。所以我不能依赖它。

你有解决这个问题的方法吗？如果可能的话，我想避免使用Javascript，但我想我没有别的选择。

我必须定位所有流行浏览器（Internet Explorer，Chrome，Firefox，Opera）。

Answer 1

_{我不知道这是否支持任何浏览器，但有一天这可能是一个可接受的解决方案。}

等于用于渲染它的字体中找到的"0"（ZERO，U + 0030）字形的高级测量值。

“advance measure”基本上是角色的宽度。在等宽字体中，所有字符宽度都相同。

另一种方法是找出每个使用的字体大小的字符宽度，并在定义宽度时使用该值的倍数。如果你很幸运，它将只是em单位的一小部分。

Answer 2

ex是与em类似的单位，但是小写x的高度，而不是大写M。在等宽字体中，您经常会发现x几乎为正方形，使ex大约等于字符的宽度。