Answers:
line-height确实可以修复它,但是您可能必须将其设置得相当大:在我的设置中,我必须将line-height增加到大约1.8,然后才能<sup>
不再对其造成干扰,但这会因字体而异。
获得一致的线条高度的一种可能方法是设置自己的上标样式,而不是默认样式vertical-align: super
。如果使用top
它,则不会在行框内添加任何内容,但可能需要进一步减小字体大小以使其适合:
sup { vertical-align: top; font-size: 0.6em; }
您可以尝试的另一种方法是使用定位将其向上移动一点而不影响线框:
sup { vertical-align: top; position: relative; top: -0.5em; }
当然,如果您没有足够的行高,这就有可能撞到上面的行。
vertical-align: bottom
(尽管不能为您带来多大的收益top
),然后给出position:relative;
正数top
。
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;
}
诀窍是将<sup>
的line-height设置为0。@Scott表示使用normal,但这并不总是有效。
这意味着您不必更改周围文本的行高即可容纳上标文本。我已经在IE7 +和其他主要浏览器中对此进行了测试。
line-height
属性发生冲突。line-height
当然,如果将整体设置为较小,它仍可能与上一条线相交。
line-height: 100%
在这种情况下使用。
line-height
我发现的可能值为0、1、1em和100%。所有这些当然都可以在Chrome和Firefox中使用。
我遇到了同样的问题,但给出的答案均无效。但是我发现一个git commit带有对我有用的修复程序:
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
保持简单:
sup { vertical-align: text-top; }
[ 字体大小取决于您的个人字体 ]
<sup>
标签影响两行之间的间距的原因与许多因素有关。这些因素包括:行高,上标相对于常规字体的大小,上标的行高以及最后但并非最不重要的是上标的底部与...对齐的高度(如果设置...)常规文本的“隧道带”(即我所说的)为135%,则常规文本(100%)的白色填充为白色的35%。对于段落,它看起来像这样:
p
{
line-height: 135%;
}
如果您随后不对上标进行白色填充...(即,将其行高保持为0),则上标仅具有其自己的文本的宽度...如果您随后要求上标是常规字体的百分比(对于例如70%),然后将其与常规文本的中间(文本中间)对齐,可以消除问题并得到看起来像上标的上标。这里是:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}
我更喜欢这里建议的解决方案,例如jsfiddle所示:
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
以满足您的要求即可。
要使所有行更高,使其看起来与上标行相同,请line-height
为整个段落定义一个更大的行
<p style='line-height:150%'>
或任何具有您想要的效果的值。
可能看起来很奇怪,但这就是您描述需求的方式。
编辑:为了使所有线条在只有一个需要比其他更多的垂直空间时看起来相同,则该段落中的所有线条都必须更高。
正如我所说,这可能不是一个有吸引力的解决方案。也许可以使用span来完成某些操作,使span上的子/上标变小,除此之外,我不相信可以实现您想要的。但我想看看别人的解决方案。
EDIT2:顺便说一句,我尝试了一个小的HTML文件,其中包含
<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中的行高度都相同(我不能说其他浏览器)