Domanda

Sarò breve perché ho poco tempo, quindi mi scuso se non è così dettagliato come vorrei che fosse.

Ho del codice: 

print("<a href='#'>Some text<sup>&reg;</sup> some more text</a>");

In FF funziona come vorrei, il collegamento nel suo insieme è sottolineato. Tuttavia, in IE, il collegamento è sottolineato ad eccezione di & # 174; dove sembra un simbolo sopra un trattino ed è piuttosto ridicolo.

Ho provato diversi suggerimenti che ho trovato su Google, ma nessuno di questi è molto utile per ottenere l'effetto desiderato. L'aggiunta di un bordo in fondo non è purtroppo un'opzione. Finora la soluzione migliore è quella di rompere completamente la sottolineatura al tag sup con CSS che lo lascia ancora funzionare bene in FF mentre sembra ancora meno sciocco in IE.

Se qualcuno potesse aiutarlo, sarebbe molto apprezzato, preferirei non visitare il sito rimuovendo i tag <sup> come mi è stato detto che dovrò fare se non dovessi risolvere questo dilemma.

AGGIORNAMENTO: è andato con il sup {" text-decoration: none " } soluzione, lo farà per ora. Ci sono segni di registrazione ovunque, quindi l'intero sito avrebbe dovuto essere aggiornato, il che era più un problema di quanto valesse la pena che tutti abbiamo deciso. Grazie a coloro che hanno risposto.

È stato utile?

Soluzione

Il tag <sup> non è eccezionale per cose come i marchi e i simboli reg.

Preferisco farlo con css: 

<span style='font-size:75%;vertical-align:super;text-decoration:none'>&reg</span>

Se puoi impostare una classe .reg: 

.reg {
    font-size:75%;
    vertical-align:super;
    text-decoration:none
}

Per: 

<span class='reg'>&reg;</span>

Altri suggerimenti

A volte non ti è permesso aggiungere classe a un link o racchiuderlo con nessun elemento. La situazione non è così rara quando è necessario lavorare con codice di terze parti. A proposito, lo stesso problema anche con l'elemento.

In questo caso puoi usare qualcosa del genere:

  1. Lasciare la sottolineatura come per Firefox (tutto sembra OK)

  2. Usa questo stile per Chrome (ha gli stessi problemi di IE, ancora più difficile): 

    [style]
a sup {
    text-decoration: none;
    display: inline-block; // without this previous property will not work
    border-bottom: 1px solid;
    line-height: 1.5em;    // this and following properties are used to shift
    margin-top: -1em;      // an element to make border aligned with underline
                       // can be used relative position or something else.
}
a sub {
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    border-bottom: 1px solid;
    line-height: 0.7em;
}
[/style]
[a href="what-aczone-can-do-for-you.aspx"]Text-Jj_Jj[sub]Jj[/sub][sup]Jj[/sup]moreText[/a]
    • scusate per [] s nei tag, non riesco ancora a capire come questo f *** system faccia esempi di codice - quando provo a formattare come vuole, ottengo un casino.

Beh, non è una soluzione elegante, fondamentalmente usa un bordo invece di una sottolineatura. Dovresti codificarne il colore in base a & Quot; Active, Visted, Etc & Quot; 

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       display: inline;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

Eric

L'ho fatto funzionare in questo modo 

print(< a href='#' class="underline">Some text< sup >&reg;< /sup > some more text< /a >)  
.underline {text-decoration:none; border-bottom:1px solid #FFF;}

La soluzione di Eric è la più vicina. Non ha bisogno di avere display: inline poiché <a> gli elementi sono elementi incorporati. l'unica cosa che gli manca è line-height in modo da poter vedere il bordo inferiore su IE 6 e IE 7. Altrimenti, non vedrai la linea. 

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       line-height: 1.5em;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

Beh, sono d'accordo che sembra orribile, ma sembra essere proprio il modo in cui IE combina sottolineatura e apice. Ti suggerisco di seguire il tuo piano CSS per rimuovere la sottolineatura per a sup se non puoi imbrogliare con un bordo. C'è una sola proprietà IE chiamata text-underline-position ma non ha alcun valore che aiuta qui o temo.

A beneficio di chiunque non lo sappia già sarebbe: 

a sup{text-decoration:none;}

Come dice Diodeus, e una piccola ricerca tende ad essere d'accordo, capisco che il marchio reg non andrebbe comunque in un elemento sup.

Quindi, supponendo che stiamo solo affrontando il problema sup / sottolineato e dimenticando che ci stiamo riferendo al segno di registrazione, le uniche soluzioni che conosco per farli "sembrare" uguali sono fare vertical-align: baseline o uccidere il text-decoration in sup.

La soluzione sul bordo inferiore posizionerà la linea sotto qualsiasi " p " & Quot; & Q quot; oppure " y " invece che attraverso le gambe inferiori delle lettere. Questo è 2px più basso di una sottolineatura.

Un'alternativa è rendere < a > position: relative
crea < sup > position: absolute; top: -3px; text-decoration: none;

aggiungi un ulteriore & amp; nbsp; dopo < / sup >

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top