-->

HTML 标签影响行高,如何让它保持一致?(HTML tag affecting lin

2019-07-21 06:02发布

如果我有一个<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;">&reg;</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">&reg;</sup>



文章来源: HTML tag affecting line height, how to make it consistent?