Hochgestellte Unterstreichung im IE

StackOverflow https://stackoverflow.com/questions/420770

Frage

Ich werde mich kurz fassen, da ich wenig Zeit habe. Es tut mir also leid, wenn dies nicht so detailliert ist, wie ich es gerne hätte.

Ich habe einen Code:

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

In FF funktioniert das so, wie ich es gerne hätte, der Link als Ganzes ist unterstrichen.Im IE ist der Link jedoch unterstrichen, außer unter dem ®, wo er wie ein Symbol über einem Bindestrich aussieht und ziemlich lächerlich aussieht.

Ich habe mehrere Vorschläge ausprobiert, die ich bei Google gefunden habe, aber keiner davon ist sehr hilfreich, um den gewünschten Effekt zu erzielen.Das Hinzufügen eines Randes am unteren Rand ist leider keine Option.Bisher besteht die beste Lösung darin, die Unterstreichung am sup-Tag mit CSS vollständig zu unterbrechen, sodass es in FF immer noch gut funktioniert und im IE immer noch weniger albern aussieht.

Wenn jemand dabei helfen könnte, wäre ich sehr dankbar. Ich würde lieber nicht die Seite durchgehen und sie entfernen <sup> Tags, wie mir gesagt wurde, muss ich tun, wenn ich dieses Dilemma nicht lösen kann.

AKTUALISIEREN:Habe mich für die sup {"text-decoration:none" }-Lösung entschieden, das reicht vorerst.Da es überall Markierungen gibt, hätte die gesamte Website aktualisiert werden müssen, was unserer Meinung nach mehr Aufwand war als es wert war.Vielen Dank an diejenigen, die geantwortet haben.

War es hilfreich?

Lösung

Das <sup> Tag ist nicht großartig für Dinge wie Marken- und Reg -Symbole.

Ich mache es lieber mit CSS:

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

Wenn Sie eine .reg -Klasse einrichten können:

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

Zum:

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

Andere Tipps

Manchmal dürfen Sie keine Klasse zu einem Link hinzufügen oder ihn mit einem Element einwickeln. Die Situation ist nicht so selten, wenn Sie mit Code von Drittanbietern arbeiten müssen. Übrigens, gleiches Problem auch mit Element.

In diesem Fall können Sie so etwas verwenden:

  1. Unterstreichen wie für Firefox (alle sehen in Ordnung aus)

  2. Verwenden Sie ein solches Styling für Chrome (es hat die gleichen Probleme wie dh noch härter):

    [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]
    • Entschuldigung für [] s in Tags, ich kann immer noch nicht testet, wie dieses F *** System Code -Beispiele macht - wenn ich versuche, so zu formatieren, wie es will, bekomme ich ein Chaos.

Nun, es ist keine elegante Lösung, verwenden Sie im Grunde genommen eine Grenze anstelle einer Untersteuerung. Sie müssten die Farbe basierend auf "Active, Visted usw." codieren,

<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

Ich habe es so zum Laufen gebracht 

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

Erics Lösung ist die nächste. Er muss nicht haben display: inline seit <a> Elemente sind Inline -Elemente. Das einzige, was ihm fehlt, ist das line-height Damit Sie den Grenzboden auf dem IE 6 und IE 7 sehen können, werden Sie die Linie nicht sehen.

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

Nun, ich stimme zu, dass es schrecklich aussieht, aber es scheint genau die Art und Weise zu sein, wie IE Unterstreichungen und Hochstellungen kombiniert.Ich schlage vor, dass Sie Ihrem CSS-Plan folgen und die Unterstreichung entfernen a sup wenn man mit einem Rand nicht schummeln kann.Es gibt eine reine IE-Eigenschaft namens text-underline-position Aber ich fürchte, es hat auch keinen Wert, der hier hilft.

Für alle, die es noch nicht wissen, wäre das:

a sup{text-decoration:none;}

Wie Diodeus sagt, und ein wenig Forschung stimmt zu, dass die Reg Markus sowieso nicht in ein SUP -Element gehen würde.

Unter der Annahme, dass wir uns nur mit dem SUP/Unterstiegsproblem befassen und vergessen, dass wir uns auf Reg Mark beziehen, sind die einzigen Lösungen, die ich kenne, um sie "das gleiche" zu machen vertical-align: baseline oder töte das text-decoration Auf der SUP.

Die Lösung des Grenzbodens platziert die Linie unter jedem "P" "q" oder "y" anstatt durch die unteren Beine der Buchstaben. Das ist 2px niedriger als eine Unterstufe.

Eine Alternative besteht darin, die u003Ca>Position zu machen: Relativu003C/a>
Machen Sie die u003Csup>Position: absolut; Top: -3px; Textdekoration: Keine;u003C/sup>

Fügen Sie ein Extra danach hinzu

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top