1

我必须将以前在系统控制台中以文本模式运行的旧应用程序移植到 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）。

4

2 回答 2

2

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

CSS3 值和单位模块定义了ch单位

等于"0"在用于渲染它的字体中找到的 (ZERO, U+0030) 字形的提前量度。

“提前量度”本质上是字符的宽度。在等宽字体中，所有字符宽度都是相同的。

The alternative is to figure out what the width of a character is for each font-size being used, and use multiples of that value when defining widths. If you're lucky it'll be a fraction of an em unit.

于 2012-06-28T13:50:58.727 回答
0

ex是一个类似于em小写但高度的单位x，而不是大写M。在等宽字体中，您经常会发现x它实际上是正方形，ex大约等于字符的宽度。

CSS 单位：http ://www.w3schools.com/cssref/css_units.asp

于 2012-06-28T12:08:21.087 回答