Soulignement en exposant dans IE

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

Question

Je vais être bref parce que je manque de temps, donc je m'excuse si ce n'est pas aussi détaillé que je le souhaiterais.

j'ai du code: 

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

En FF, cela fonctionne comme je le voudrais, le lien dans son ensemble est souligné. Cependant, dans IE, le lien est souligné sauf sous & # 174; où il ressemble à un symbole au-dessus d'un trait d'union et est plutôt ridicule.

J'ai essayé plusieurs suggestions trouvées sur Google, mais aucune d'entre elles n'est très utile pour obtenir l'effet souhaité. Ajouter une bordure en bas n'est malheureusement pas une option. Pour l’instant, la meilleure solution consiste à rompre complètement le soulignement au niveau de la balise sup avec CSS, ce qui lui permet de fonctionner correctement en FF tout en ayant l’air moins ridicule en IE.

Si quelqu'un pouvait nous aider avec ceci, ce serait très apprécié, je préférerais que le site ne supprime pas les balises <sup>, car on m'avait dit que je devrais le faire si je ne résolvais pas ce dilemme.

UPDATE: est entré avec la sup {" text-decoration: none " } solution, ça ira pour le moment. Il y a des repères partout, donc tout le site aurait dû être mis à jour, ce qui était plus ennuyeux qu'il ne valait la peine que nous ayons tous décidé. Merci à ceux qui ont répondu.

Était-ce utile?

La solution

La balise <sup> n'est pas très utile pour des choses comme les symboles de marque de commerce et les symboles d'enregistrement.

Je préfère le faire avec css: 

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

Si vous pouvez configurer une classe .reg: 

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

Pour: 

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

Autres conseils

Parfois, vous n'êtes pas autorisé à ajouter une classe à un lien ni à l'envelopper avec un élément. La situation n'est pas si rare lorsque vous devez travailler avec du code tiers. BTW, même problème avec élément aussi.

Dans ce cas, vous pouvez utiliser quelque chose comme ceci:

  1. Laissez le soulignement tel quel pour Firefox (tout va bien)

  2. Utilisez ce style pour Chrome (les problèmes sont les mêmes que ceux d'IE, encore plus difficiles): 

    [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]
    • désolé pour les tags [] dans les balises, je ne parviens toujours pas à comprendre comment ce système f *** crée des exemples de code - lorsque j'essaie de formater à sa guise, je reçois un désordre.

Bien, ce n’est pas une solution élégante, utilisez essentiellement une bordure au lieu d’un soulignement. Vous devez en coder la couleur en fonction de & "Actif, affiché, etc. &";

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

Je l'ai fait fonctionner comme ça 

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

La solution d'Eric est la plus proche. Il n'a pas besoin d'avoir display: inline puisque <a> les éléments sont des éléments en ligne. la seule chose qui lui manque est le line-height afin que vous puissiez voir le bas de la bordure sur IE 6 et IE 7. Sinon, vous ne verrez pas la ligne. 

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

Eh bien, je suis d’accord, c’est horrible, mais c’est comme ça que IE combine à la fois soulignement et exposant. Je vous suggère d’aller avec votre plan CSS pour supprimer le soulignement de a sup si vous ne pouvez pas tricher avec une bordure. Il existe une propriété IE uniquement appelée text-underline-position mais elle n’a aucune valeur, ce qui est utile ici non plus, je le crains.

Pour le bénéfice de tous ceux qui ne le savent pas déjà: 

a sup{text-decoration:none;}

Comme Diodeus le dit, et quelques recherches ont tendance à s’accorder, je comprends que la marque de commerce n’entrerait de toute façon pas dans un élément sup.

Donc, en supposant que nous ne traitions que le problème sup / underline et en oubliant que nous faisons référence à la marque de commerce, les seules solutions que je connaisse pour leur donner la même apparence sont de faire vertical-align: baseline ou de tuer le text-decoration sur le sup.

La solution de bordure inférieure place la ligne sous tout " p " " q " ou " y " au lieu de passer par les pattes inférieures des lettres. C'est 2px plus bas qu'un soulignement.

Une alternative consiste à créer le < un > position: relative
faire la < sup > position: absolue; en haut: -3px; text-decoration: aucune;

ajouter un & supplémentaire; amp; nbsp; après < / sup >

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top