Tag HTML <sup /> que afeta a altura da linha, como torná-la consistente?

Se eu tiver uma <sup>tag em uma tag de várias linhas <p>, a linha com o sobrescrito terá um espaçamento maior acima das outras linhas, independentemente da altura da linha que eu coloquei <p>.

Editar para esclarecimento : não quero dizer que tenho muitos <p>s, cada um em uma única linha. Eu tenho um single <p>com conteúdo suficiente para causar quebra automática em várias linhas. Em algum lugar (em qualquer lugar) do texto, pode haver um <sup>ou <sub>. Isso afeta a altura da linha, adicionando espaçamento extra acima / abaixo. Se eu definir uma altura de linha maior, <p>isso não fará diferença para o problema. A altura da linha é aumentada, mas o espaçamento extra ainda permanece.

Como posso torná-lo consistente - ou seja, todas as linhas têm o mesmo espaçamento, independentemente de conterem <sup>ou não?

Suas soluções devem ser entre navegadores (IE 6+, FF, safari, opera, chrome)

line-height corrige isso, mas você pode precisar torná-lo bem grande: nas minhas configurações, tenho que aumentar a altura da linha para cerca de 1,8 antes que o <sup>item não interfira mais, mas isso varia de fonte para fonte.

Uma abordagem possível para obter alturas consistentes de linha é definir seu próprio estilo sobrescrito em vez do padrão vertical-align: super. Se você usá- toplo, não adicionará nada à caixa de linha, mas poderá ser necessário reduzir ainda mais o tamanho da fonte para ajustá-la:

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

Outro truque que você pode tentar é usar o posicionamento para subir um pouco sem afetar a caixa de linha:

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

É claro que isso corre o risco de colidir com a linha acima se você não tiver altura suficiente.

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;
}

O truque é definir a <sup>altura da linha como 0. @Scott disse que usa normal, mas isso nem sempre funciona.

Isso significa que você não precisa alterar a altura da linha do texto ao redor para acomodar o texto sobrescrito. Eu testei isso no IE7 + e nos outros principais navegadores.

Eu tive o mesmo problema e nenhuma das respostas fornecidas funcionou. Mas encontrei um commit do git com uma correção que funcionou para mim:

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

mantenha a calma:

sup { vertical-align: text-top; }

[ tamanho da fonte dependente da sua face de texto individual]

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

Eu prefiro usar lengthno alinhamento vertical. Isso alinha a linha de base do elemento no comprimento especificado acima da linha de base de seu pai.

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

A razão pela qual a <sup>tag está afetando o espaçamento entre duas linhas está relacionada a vários fatores. Os fatores são: altura da linha, tamanho do sobrescrito em relação à fonte regular, altura da linha do sobrescrito e, por último mas não menos importante, qual é a parte inferior do sobrescrito alinhada com ... Se você definir ... a altura da linha de texto normal para estar em uma "faixa de túnel" (é o que eu chamo) de 135%, em seguida, o texto normal (os 100%) fica branco com 35% de mais branco. Para um parágrafo, fica assim:

 p
    {
            line-height: 135%;
    }

Se você não colocar o sobrescrito em branco ... (ou seja, manter a altura da linha em 0), o sobrescrito terá apenas a largura de seu próprio texto ... se você solicitar ao sobrescrito uma porcentagem da fonte regular (por exemplo 70%) e você o alinha com o meio do texto normal (meio do texto), você pode eliminar o problema e obter um sobrescrito que se pareça com um sobrescrito. Aqui está:

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

Prefiro a solução sugerida aqui , como exemplificado por este 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>.

A vantagem desta solução é que você pode personalizar o posicionamento vertical do sobrescrito e do subscrito, para evitar conflitos com a linha acima ou abaixo ... acima, apenas aumente ou diminua o valor 0.2empara atender às suas necessidades.

Para tornar todas as linhas mais altas , ter a mesma aparência da linha com o sobrescrito, defina uma maior line-heightpara o parágrafo inteiro

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

ou qualquer valor que dê o efeito que você deseja.

Pode parecer estranho, mas foi assim que você descreveu seus requisitos.

EDIT: Para fazer com que todas as linhas tenham a mesma aparência quando apenas uma precisar de mais espaço vertical do que as outras , TODAS as linhas do parágrafo deverão ser mais altas.

Isso, como eu disse, pode não ser uma solução atraente. Talvez algo possa ser feito com um intervalo, tornando apenas o texto com o sub / sobrescrito menor , além disso, não acredito que o que você deseja possa ser alcançado. Mas eu gostaria de ver a solução de outra pessoa.

EDIT2: Aliás, eu tentei um pequeno arquivo html contendo

<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>

E as linhas têm a mesma altura no FF3.0.14 e no Konqueror (não posso falar por outros navegadores)

Eu tenho usado line-height: normal para o sobrescrito, o que funciona bem para mim no Safari, Chrome e Firefox, mas não tenho certeza sobre o IE.

Use isso especialmente no boletim informativo -

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

Gosto da solução de Milingu Kilu, mas com o mesmo espírito que prefiro

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

& sup1, & sup2 etc. podem fazer o truque. é um truque de HTML para substituir

A resposta daqui funciona em phantomjs e em HTML incorporado por email:

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