HTML 标签影响行高，如何使其一致？

小开

为了使所有的行更高看起来与带上标的行相同，为整个段落定义一个较大的 line-height

<p style='line-height:150%'>

或者任何你想要的效果。

这可能看起来很奇怪，但这就是你如何描述你的需求。

编辑: 为了使所有的行看起来相同的 当只有一个需要更多的垂直空间比其他人，所有的行在段落将不得不更高。

正如我所说，这可能不是一个有吸引力的解决方案。也许有些事情可以做一个跨度使只是与子/上标更小的文本，除此之外，我不相信你想要的可以实现。但我想看看别人的解决方案。

编辑2: 顺便说一下，我尝试了一个包含

<html>
<head>
<title>line-height</title>
<style>
p {
line-height : 1.5em;
width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow,
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

在 FF3.0.14和 Konqueror 中，这些行的高度都是一样的(我不能代表其他浏览器)

小开

最佳答案

Line-height 确实可以修复这个问题，但是你可能需要把它设置得非常大: 在我的设置中，我必须把 line-height 增加到1.8左右，然后 才不会再干扰它，但是这会因字体的不同而有所不同。

获得一致行高的一种可能方法是设置您自己的上标样式，而不是默认的 vertical-align: super。如果你使用 top，它不会添加任何东西到行框，但你可能必须进一步减少字体大小，使其适合:

sup { vertical-align: top; font-size: 0.6em; }

另一个你可以尝试的技巧是使用位置来移动它一点，而不影响行框:

sup { vertical-align: top; position: relative; top: -0.5em; }

当然，如果没有足够的行高，这会有撞到上面的行的风险。

小开

我一直在使用 line-height: Normal 作为上标，这在 Safari、 Chrome 和 Firefox 中都很好用，但我不确定 IE 是否适用。

小开

sup {
line-height: 0;


/* The following rules (or similar) likely come from browser
* style and are not needed
*/
font-size: 0.83em;
vertical-align: super;
}

诀窍是将 的行高设置为0。@Scott 说使用正常，但这并不总是有效。

这意味着你 不需要改变的行高周围的文本，以容纳上标文本。我已经在 IE7 + 和其他主流浏览器上测试过了。

小开

特别是在时事通讯上使用这个-

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

小开

我也有同样的问题，而且给出的答案都不起作用。但是我发现了一款去死吧，它的修复程序对我很有效:

sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}

小开

放轻松:

sup { vertical-align: text-top; }

[ 字体大小取决于你的个人字体]

小开

我喜欢 Milingu Kilu 的解决方案，但在同样的精神，我更喜欢

sup { vertical-align:top; line-height:100%; }

小开

我更喜欢在垂直对齐时使用 length。这将使元素的基线在给定的长度上高于其父元素的基线。

sup {
font-size: .83em;
vertical-align: 0.25em;
line-height: 0;
}

小开

标签影响两行间距的原因与许多因素有关。这些因素包括: 行高、上标相对于常规字体的大小、上标的行高以及最后但并非最不重要的是上标的底部与..。如果你设置... 规则文本的行高为“隧道带”(我是这样称呼它的)的135% ，那么规则文本(100%)的白色填充比白色填充多35% 。对于一个段落，如下所示:

 p
{
line-height: 135%;
}

如果你不用白色填充上标... (例如，保持它的行高为0)上标只有它自己文本的宽度... 如果你要求上标是普通字体的一个百分比(例如70%) ，并将其与普通文本的中间(文本-中间)对齐，你可以消除这个问题，得到一个看起来像上标的上标。这就是:

sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}

小开

sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}

小开

& sup1，& sup2等等可能会起作用。这是一个 HTML 的上标技巧

小开

来自给你的回答，可以在 phantomjs 和嵌入电子邮件的 HTML 中工作:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>

小开

我更喜欢建议的给你解决方案，例如这把小提琴:

CSS:

sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}


sub {
top: 0.2em;
}

HTML:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

这个解决方案的美妙之处在于，你可以调整上标和下标的垂直位置，以避免与上面或下面的线发生任何冲突... 在上面，只需增加或减少 0.2em来满足你的需求。

小开

我只需要在页面的一个部分更改默认的 行为，所以我在那里应用了一个类。对我来说也是垂直对齐: 顶部工作正常，鹅绒大约4像素。

sup.my-class {
vertical-align: top;
position: relative;
top: -4px;
}

小开

我的工作是这样的:

<div>
<span>line</span><br/>
<span>span styled with vertical align super</span><span style="vertical-align:super;">1</span><br/>
<span>line</span><br/>
<span>same as before but line height set to 0</span><span style="vertical-align:super; line-height:0; font-size:.75em">1</span><br/>
<span>line</span><br/>
<span>now using sup tag and sup class with line height 0</span><sup style="line-height: 0">1</sup><br/>
<span>line</span>
</div>

HTML < sup/> 标签影响行高，如何使其一致？