¿Cómo puedo mantener una altura de línea constante con elementos en superíndice?

si tengo un <sup> elemento en un párrafo de varias líneas, la línea con el superíndice tiene un espacio entre líneas más grande que las otras líneas, independientemente de la altura de línea que coloque en el párrafo.

No significa que tenga muchos párrafos, cada uno en una sola línea. Tengo un solo párrafo con suficiente contenido para causar que se ajuste en varias líneas. En algún lugar (cualquier lugar) en el texto puede haber un <sup> o <sub>. Esto afecta la altura de la línea para esa línea al agregar espacio adicional arriba/abajo. Si configuro una altura de línea más grande en el párrafo, esto no hace ninguna diferencia en el problema. La altura de la línea aumenta, pero el espacio adicional aún permanece.

¿Cómo puedo hacerlo consistente, es decir, todas las líneas tienen el mismo espaciado si contienen un <sup> ¿O no?

Sus soluciones deben ser multinavegador (IE 6+, Firefox, Safari, Opera, Chrome)

line-height lo soluciona, pero es posible que tengas que hacerlo bastante grande: en mi configuración, tengo que aumentar line-height a aproximadamente 1.8 antes de que el <sup> ya no interfiere con él, pero esto variará de una fuente a otra.

Un posible enfoque para obtener alturas de línea consistentes es establecer su propio estilo de superíndice en lugar del predeterminado vertical-align: super. Si utiliza top no agregará nada al cuadro de línea, pero es posible que deba reducir aún más el tamaño de la fuente para que quepa:

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

Otro truco que podrías intentar es usar el posicionamiento para moverlo un poco hacia arriba sin afectar el cuadro de línea:

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

Por supuesto, esto corre el riesgo de chocar con la línea de arriba si no tiene suficiente altura de línea.

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

El truco es establecer el <sup>‘s line-height a 0. @Scott dijo que usara normal, pero esto no siempre funciona.

Esto significa tu no tienes que cambiar la altura de línea del texto circundante para acomodar el texto en superíndice. He probado esto en IE7+ y los otros navegadores principales.

Tuve el mismo problema y ninguna de las respuestas dadas funcionó. Pero encontré un git cometer con una solución que funcionó para mí:

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

Manténgalo fácil:

sup { vertical-align: text-top; }

[font-size dependent on your individual type-face]

Prefiero la solución sugerida aquícomo lo ejemplifica 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>.

La belleza de esta solución es que puede adaptar el posicionamiento vertical del superíndice y el subíndice, para evitar conflictos con la línea de arriba o de abajo… en lo de arriba, simplemente aumente o disminuya el 0.2em para satisfacer sus necesidades.

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

La razón por la cual el <sup> etiqueta está afectando el espacio entre dos líneas tiene que ver con una serie de factores. Los factores son: la altura de la línea, el tamaño del superíndice en relación con la fuente normal, la altura de la línea del superíndice y, por último, pero no menos importante, con qué se alinea la parte inferior del superíndice… Si configura… la altura de la línea de texto regular para estar en una “banda de túnel” (así es como lo llamo) de 135%, entonces el texto regular (el 100%) se rellena con blanco con un 35% de más blanco. Para un párrafo esto se ve así:

 p
    {
            line-height: 135%;
    }

Si luego no rellena el superíndice con blanco… (es decir, mantiene la altura de la línea en 0), el superíndice solo tiene el ancho de su propio texto… si luego le pide al superíndice que sea un porcentaje de la fuente normal (por ejemplo, ejemplo 70%) y lo alinea con el medio del texto normal (text-middle), puede eliminar el problema y obtener un superíndice que parece un superíndice. Aquí lo tienes:

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