如果我在多行<p>标签中有一个<sup>标签,那么带有上标的行比其他行具有更大的行间距,而不管我放在<p>标签上的行高是多少。
澄清:我不是说我有很多<p>标签,每个都在一行上。 我有一个带有足够内容的<p>来引起包装到多行。 文本中的某处(任何地方)可能有<sup>或<sub>。 这会通过在上面/下面添加额外的间距来影响该行的行高。 如果我在<p>上设置更大的行高,这对问题没有任何影响。 线高增加,但额外的间距仍然存在。
我该如何使它保持一致,即所有行无论是否包含<sup>都有相同的间距?
你的解决方案必须是跨浏览器(IE 6 +,FF,Safari,Opera,Chrome)。
发布于 2018-03-22 12:40:14
行高确实修复了它,但你可能必须使其相当大:在我的设置中,我必须在<sup>之前将行高增加到大约1.8,不再干扰它,但是这会因字体的不同而改变。
获得一致行高的一种可能方法是设置自己的上标样式,而不是默认的样式:vertical-align: super
。如果你用top
它不会在行框中添加任何内容,但你可能需要进一步缩小字体大小,以使其适合:
sup { vertical-align: top; font-size: 0.6em; }
你可以尝试的另一个攻击是使用定位将其向上移动一点,而不影响行框:
sup { vertical-align: top; position: relative; top: -0.5em; }
当然,如果你没有足够的行高,这就有可能撞上上面的行。
发布于 2018-03-22 13:20:45
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
诀窍是设置<sup>
的行高为0。
这意味着你不用改变周围文字的线条高度,以适应上标文本。我已经在IE7+和其他主要浏览器中测试过这个。
https://stackoverflow.com/questions/-100007728
复制相似问题