有没有办法让文本字符齐到HTML5中的边界框顶部？

Question

这是HTML中的Label元素，红色虚线轮廓显示了它的边界框。请注意，字符 不 与其边框的上边缘齐平：

line-height:1.2; /* default */

这是JSFiddle显示上面http://jsfiddle.net/6gLQU/16/的图像。

以下是line-height样式设置为1或100％的相同文本（它更好但仍不是齐平）：

line-height:1;

最后，如果我将line-height样式设置为.8（80％），如this code example中那样，除了上一个测试文本中的小但可接受的单个像素差异外，它是齐平的。这很好但是如果有多行文本（多行），则下一行被拉得太高，因为这会使每行高度达到其实际高度的80％。

line-height:.8;

这是JSFiddle代码http://jsfiddle.net/6gLQU/16/。

（如果您不了解Flash，可以跳过此段落） 在Flash TLF（FTE或Flash文本引擎）中，如果添加文本字段，使用FTE或TLF作为引擎，则文本字符将与边界矩形的最顶部齐平。它们看起来像最后一张图片中的文字（字符紧贴边框的顶部边框）。

在HTML中，文本字符未与边界矩形的顶部齐平，如上例所示。增加字体大小时，还会增加从字符顶部到边界框矩形顶部的间隙。

在我对HTML和CSS中使用的文本的研究中，字体样式line-height将调整文本字符在其边界框内的位置（如上图所示）。在Flash中，line-height样式不会影响第一行文本中的字符，但会调整以下行以及HTML（因此它在HTML或Flash中不适用于多行）。

我确定如果我在HTML中将行高设置为.8或80％，则字体适合在边界框的顶部进行冲洗（如上所示）。大！这就是我想要的，但它不适用于多行文本。如果有多行，则下一行是＆＃34;拉出＆＃34;并且重叠前一行，因为显然，我给每行只有80％的实际高度。

无论如何，我的问题是：

1. 我是否可以使用另一种方法将HTML字符刷新到边界框的顶部？我与line-height一起使用的hack导致多行文本太靠近。
2. Flash TLF中是否有设置使其显示行为并显示为HTML文本行？也就是说，使它不会将文本字符拉到边界框的顶部（匹配HTML布局规则）。

我找到了一个使用负余量空间的替代方案，但我必须手动输入它。它并不理想，因为它是每个字体大小的不同值（通过试验和错误找到）并且它会移动文本框，而不是字符。使用line-height黑客，我可以使用.8，我知道它将被定位正确。

这是使用负边距的link to the code和图片。我只将它应用到最后一个元素。注意红色边框：

font-size:64px;
line-height:1.2;
margin-top:-14px;



another test和another using multiples of 12使用负保证金百分比。同样，每个负边际值都是不同的，通过反复试验找到：

font-size:12px;
line-height:1.2;
margin-top:-.19%;



以下是有关FTE engine的信息。我读了一个小时，我意识到现在我知道了一些这些话。

PS对不起这个问题太久了。显然，我试图赢得最长的奖项。此外，我添加了两个问题，因为存在实际问题，然后如果实际问题可解决则可能没有必要的解决方法问题。我不确定这是什么，但有人告诉我，在SO上编程问题是常见的。此外，添加Firefox标签，因为它在Firefox中运行，其中一个Firefox开发人员可能会看到它，并知道这一切是如何工作的。

Answer 1

字体间距不是问题，因为文本会均匀缩放。问题是由百分比保证金造成的。百分比边距计算为宽度的百分比。正如您所料，百分比保证金与

之间没有关系

方法I

您可以做的是，找到一个块的像素边距。然后让k = font_size/ margin为该块。将font-size除以k以获得其他区块的边距。

方法II

请尝试使用 em 值transform: translate;，而不是使用百分比保证金：

相关代码

label { /* added properties*/
  transform: translateY(-0.2em);
}

<强> Updated Fiddle 1

方法III

我意识到，有点迟了，transform不是必需的。您只需使用margin-top: -0.2em;

即可

相关代码

label { /* added properties*/
  margin-top: -0.2em;
}

<强> Updated Fiddle 2

#BorderContainer1711  {
	position:absolute;
	left:32px;
	top:60px;
	width:500px;
	height:160px;
	background-color:#FFFFFF;
	background-alpha:1;
	border-width:1px;
	border-style:solid;
	border-color:#00DD00;
	color:#000000;
}

label { /* added properties*/
   margin-top: -0.2em;
}

#Label1551  {
	position:absolute;
	left:46px;
	top:60px;
	color:#000000;
	font-weight:normal;
	font-family:Arial;
	font-size:12px;
}

#Label1613  {
	position:absolute;
	left:123px;
	top:60px;
	width:61px;
	color:#000000;
	font-weight:normal;
	font-family:Arial;
	font-size:24px;
}

#Label937  {
	position:absolute;
	left:220px;
	top:60px;
	color:#000000;
	font-weight:normal;
	font-family:Arial;
	font-size:36px;
}

#Label2125  {
	position:absolute;
	left:342px;
	top:60px;
	color:#000000;
	font-weight:normal;
	font-family:Arial;
	font-size:64px;
}



*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}


*, *:before, *:after {
  outline:1px dotted red;
}

	<div id="BorderContainer1711">

	</div>
	<label id="Label1551">[12px]</label>
	<label id="Label1613">[24px]</label>
	<label id="Label937">[36px]</label>
	<label id="Label2125">[64px]<br>nextline</label>