HTML tag che colpisce altezza della linea, come per renderlo coerente?

Question

Se ho un tag <sup> in un tag <p> multi-linea, la linea con l'apice su di esso ha un'interlinea grande sopra esso che le altre linee, senza riguardo a quale linea-altezza metto sul <p>.

Modifica chiarimenti : Non voglio dire che ho un sacco di <p>s, ciascuno, che si trova su una singola linea. Ho un singolo <p> con abbastanza contenuti in esso per provocare avvolgendo su più righe. Da qualche parte (ovunque) nel testo ci può essere un <sup> o <sub>. Questo influenza l'altezza della linea per quella riga aggiungendo spaziatura aggiuntiva sopra / sotto. Se ho impostato una più grande line-height sul <p> questo fa alcuna differenza per il problema. La line-height è aumentata, ma la spaziatura più ancora rimane.

Come posso renderlo coerente -? Vale a dire tutte le linee hanno la stessa spaziatura se contengono un <sup> o no

I tuoi soluzioni devono essere cross-browser (IE 6+, FF, Safari, Opera, Chrome)

Answer 1

line-height non risolvere il problema, ma potrebbe essere necessario renderlo abbastanza grande: sul mio setttings devo aumentare la line-height a circa 1,8 prima della <sup> non interferisce più con esso, ma questo può variare da carattere a carattere .

Un possibile approccio per ottenere altezze di linea coerenti è quello di impostare il proprio stile apice al posto del vertical-align: super default. Se si utilizza top non aggiungerà nulla alla casella linea, ma potrebbe essere necessario ridurre la dimensione del carattere ulteriormente per farlo entrare:

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

Un altro attacco si potrebbe provare è quella di utilizzare il posizionamento per spostarlo un po 'senza influenzare la casella riga:

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

Naturalmente questo rischia di schiantarsi nella linea di cui sopra, se non si dispone di abbastanza line-height.

Answer 2

sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

Il trucco è quello di impostare line-height del <sup> a 0. @ Scott ha dichiarato di utilizzare il normale, ma questo non sempre funziona.

Questo significa che non c'è bisogno di cambiare il line-height del testo circostante per accogliere il testo apice. Ho provato questo in IE7 + e gli altri principali browser.

Answer 3

Ho avuto lo stesso problema e non delle risposte date hanno lavorato. Ma ho trovato un git commit con una correzione che ha funzionato per me:

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

Answer 4

mantenerlo semplice:

sup { vertical-align: text-top; }

[ font-size dipendono dal singolo tipo-face]

Answer 5

Io preferisco usare length sul vertical-align. Questo allinea la linea di base dell'elemento alla lunghezza di cui sopra la linea di base del suo genitore.

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

Answer 6

Il motivo per cui il tag <sup> sta interessando la distanza tra due linee ha a che fare con una serie di fattori. I fattori sono: altezza linea, dimensione del apice in relazione al carattere regolare l'altezza della linea apice e ultimo ma non meno qual è il fondo della allineamento apice con ... Se si imposta ... l'altezza riga di testo normale di essere in una "banda di tunnel" (che è quello che io chiamo io) del 135%, allora testo normale (il 100%) ottiene imbottita bianca del 35% più bianca. Per un paragrafo appare simile a questo:

 p
    {
            line-height: 135%;
    }

Se poi fare pad non bianco l'apice ... (vale a dire mantenere la sua altezza la linea a 0) l'apice ha solo la larghezza del suo proprio testo ... se poi chiedere l'apice di essere una percentuale del normale carattere (per esempio il 70%) e l'allineamento con la metà del testo normale (text-centro), è possibile eliminare il problema e ottenere un apice che assomiglia a un apice. Eccolo:

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

Per tutte le linee di più alto , a guardare la stessa della linea con l'apice, definire un line-height più grande per l'intero paragrafo

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

o qualsiasi valore dà l'effetto desiderato.

Può sembrare strano, ma è così che lei ha descritto le vostre esigenze.

EDIT:. Al fine di rendere tutte le righe hanno lo stesso aspetto quando soltanto uno ha bisogno di spazio più verticale rispetto agli altri , tutte le linee nel paragrafo dovrà essere più alto

Questa, come ho detto, non può una soluzione interessante. Forse qualcosa può essere fatto con un arco facendo solo il testo con il sub / apice piccolo , a parte che non credo ciò che si vuole può essere raggiunto. Ma mi piacerebbe vedere la soluzione di qualcun altro.

EDIT2: Per inciso, ho provato un piccolo file html contenente

<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 le linee sono tutte alla stessa altezza in FF3.0.14 e Konqueror (non posso parlare per gli altri browser)

Answer 9

Ho usato line-height: normale per l'apice, che funziona bene per me in Safari, Chrome e Firefox, ma non sono sicuro di IE.

Answer 10

utilizzare appositamente questo su newsletter -

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

Answer 11

Mi piace la soluzione di Milingu Kilu ma con lo stesso spirito preferisco

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

Answer 12

& SUP1, & sup2 ecc potrebbe fare il trucco. si tratta di un trucco HTML per Apice

Answer 13

Risposta da qui , lavora in entrambi phantomjs e in HTML e-mail-embedded:

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