如果我有一个<sup>
在多线标签<p>
标签,上面有具有较大的线距其上方比其他线路的上标线,什么行高的irregardless我穿上<p>
。
编辑澄清 :我并不意味着我有很多的<p>
S,其中每一个是在一行。 我有一个单一的<p>
在它足够的内容,以使缠绕在多条线。 某处在文本(任意位置)有可能是一个<sup>
或<sub>
。 这通过将上述额外的间距/下面会影响该线路的线路的高度。 如果设置在更大的行高的<p>
这使得该问题没有差别。 该行高度增加,但额外的空间仍然存在。
我怎样才能使它保持一致-即所有线路具有相同的间距是否包含<sup>
或不?
您的解决方案必须是跨浏览器(IE 6 +,FF,Safari浏览器,歌剧,铬)
Answer 1:
行高并修复它,但你可能要让它非常大:我setttings我之前增加线高度约1.8 <sup>
不再会干涉,但这将有所不同字体的字体。
一种可能的方法来获得一致的高度线是设置自己的标造型,而不是默认的vertical-align: super
。 如果你使用top
也不会添加任何东西到行框,但您可能不得不减少字体大小进一步,使它适合:
sup { vertical-align: top; font-size: 0.6em; }
你可以尝试另一种黑客是利用定位将其移动了一下,而不会影响线箱:
sup { vertical-align: top; position: relative; top: -0.5em; }
当然,这种运行撞到上面,如果你没有足够的line-height行的风险。
Answer 2:
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
关键是要设置的<sup>
的行高为0 @Scott所述使用正常的,但是这并不总是工作。
这意味着你不必改变周围的文字,以适应标文本的行高。 我在IE7 +和其他主流浏览器测试这一点。
Answer 3:
我有给答案了同样的问题和非工作。 但是,我发现了一个git的承诺与修订是没有工作对我来说:
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
Answer 4:
保持简单:
sup { vertical-align: text-top; }
[ 字体大小依赖于你的个人型面]
Answer 5:
我更喜欢使用length
在垂直对齐。 此对准元件的基线在其父的基线以上的给定长度。
sup {
font-size: .83em;
vertical-align: 0.25em;
line-height: 0;
}
Answer 6:
为什么原因<sup>
标签是影响两条线之间的间隔具有许多因素有关。 这些因素是:行高,在关系上标尺寸到正规字体,标线的高度和最后但并非最不重要的是与...上标对准的底部如果设置...行高定期文本是在一个“隧道乐队”(这就是我称呼它)的135%,那么普通的文本(100%)的更白的35%得到白色填充。 对于一个段落,这看起来是这样的:
p
{
line-height: 135%;
}
如果再没有白垫标...(即其行高度保持为0)的标徒有其自己的文本的宽度......如果你再问问标是常规字体的百分比(例如70%)和你的常规文本(文本中)的中间对齐,就可以消除这个问题,并得到一个标,看起来像一个标。 这里是:
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}
Answer 7:
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
Answer 8:
为了让所有的行高 ,看起来一样与标线,定义一个较大line-height
整个段落
<p style='line-height:150%'>
或任何价值给你想要的效果。
它可能看起来很奇怪,但是这就是你如何描述你的要求。
编辑:为了使所有行看起来是一样的,当只有一个需要比别人更多的垂直空间 ,段落中的所有行则要更高。
这一点,正如我所说的,可能不是一个有吸引力的解决方案。 或许真的可以用一个跨度仅仅制造与子/标小 ,除此之外,我不相信你想要什么就可以实现文字来完成。 但我想看看别人的解决方案。
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都具有相同的高度(我不能代表其他浏览器说话)
Answer 9:
我一直在使用的line-height:正常的标,这在Safari,Chrome和Firefox的我工作得很好,但我不知道IE浏览器。
Answer 10:
特别使用于通讯 -
<sup style="font-size:9px; line-height:8px;">®</sup>
Answer 11:
我喜欢Milingu Kilu的解决方案,但本着同样的精神,我更喜欢
sup { vertical-align:top; line-height:100%; }
Answer 12:
&SUP1,SUP2和等可能做的伎俩。 它是一个HTML招上标
Answer 13:
从答案在这里 ,工作在两个phantomjs和电子邮件中嵌入HTML:
Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">®</sup>
文章来源: HTML tag affecting line height, how to make it consistent?