Subíndice subrayado en IE

Question

Voy a ser breve porque tengo poco tiempo, así que me disculpo si esto no es tan detallado como me gustaría.

Tengo un código:

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

En FF, esto funciona como me gustaría, el enlace en su conjunto está subrayado. Sin embargo, en IE, el enlace está subrayado excepto bajo & # 174; donde se ve como un símbolo encima de un guión y tiene un aspecto bastante ridículo.

He probado varias sugerencias que encontré en Google, pero ninguna de ellas es muy útil para lograr el efecto deseado. Lamentablemente, agregar un borde en la parte inferior no es una opción. Hasta ahora, la mejor solución es romper el subrayado por completo en la etiqueta sup con CSS, lo que todavía lo deja funcionando bien en FF mientras se ve menos tonto en IE.

Si alguien pudiera ayudar con esto, sería muy apreciado, prefiero no visitar el sitio eliminando las etiquetas <sup> como me han dicho que tendré que hacer si no resuelvo este dilema.

ACTUALIZACIÓN: Fui con el sup {" text-decoration: none " } solución, servirá por ahora. Hay marcas de registro en todas partes, por lo que todo el sitio debería haber sido actualizado, lo cual fue más problema de lo que valió la pena que todos decidimos. Gracias a quienes respondieron.

Answer 1

La etiqueta <sup> no es excelente para cosas como marcas registradas y símbolos de registro.

Prefiero hacerlo con css:

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

Si puede configurar una clase .reg:

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

Para:

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

Answer 2

A veces no está permitido agregar clase a un enlace o envolverlo con ningún elemento. La situación no es tan rara cuando necesita trabajar con código de terceros. Por cierto, el mismo problema con el elemento también.

En este caso, puede usar algo como esto:

1. Deja el subrayado como está para Firefox (todos se ven bien)

2. Utilice ese estilo para Chrome (tiene los mismos problemas que IE, incluso más difícil):

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

   • lo siento por [] s en las etiquetas, todavía no puedo entender cómo este sistema f *** hace muestras de código: cuando trato de formatear como lo desea, me da un lío.

Answer 3

Bueno, no es una solución elegante, básicamente use un borde en lugar de un subrayado. Tendría que codificar el color basado en & Quot; Activo, visitado, 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

Answer 4

Lo hice funcionar así

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

Answer 5

La solución de Eric es la más cercana. No necesita tener display: inline ya que los elementos <a> son elementos en línea. lo único que le falta es el line-height para que pueda ver el borde inferior en IE 6 e IE 7. De lo contrario, no verá la línea.

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

Answer 6

Bueno, estoy de acuerdo en que se ve horrible, pero parece ser la forma en que IE combina subrayado y superíndice. Le sugiero que siga su plan CSS para eliminar el subrayado de a sup si no puede hacer trampa con un borde. Hay una propiedad solo para IE llamada text-underline-position pero no tiene ningún valor que ayude aquí, me temo.

Para beneficio de cualquiera que no lo sepa, eso sería:

a sup{text-decoration:none;}

Answer 7

Como dice Diodeus, y un poco de investigación tiende a estar de acuerdo, entiendo que la marca de registro no iría en un elemento sup de todos modos.

Entonces, suponiendo que solo estamos abordando el problema de sup / subrayado y olvidando que nos estamos refiriendo a la marca de registro, las únicas soluciones que conozco para hacer que se vean igual son hacer vertical-align: baseline o matar el text-decoration en la sup.

Answer 8

La solución border-bottom colocará la línea debajo de cualquier " p " " q " o " y " en lugar de a través de las patas inferiores de las letras. Eso es 2px más bajo de lo que sería un subrayado.

Una alternativa es hacer que < a > posición: relativa
hacer el < sup > posición: absoluta; arriba: -3px; decoración de texto: ninguno;

agrega un & amp; nbsp; después de < / sup >