superindices - superindice html
Subrayado superÃndice en IE (8)
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>®</sup> some more text</a>");
En FF, esto funciona como me gustaría, el enlace como un todo está subrayado. Sin embargo, en IE, el enlace está subrayado excepto debajo de ®, donde parece un símbolo sobre un guión y es bastante ridículo.
He intentado varias sugerencias que encontré en Google, pero ninguna de ellas es muy útil para lograr el efecto deseado. Agregar un borde al final no es una opción desafortunadamente. Hasta ahora, la mejor solución es romper el subrayado por completo en la etiqueta sup con CSS, que todavía funciona bien en FF mientras todavía parece menos tonto en IE.
Si alguien pudiera ayudar con esto, sería muy apreciado, preferiría no ir por el sitio eliminando las etiquetas <sup> como me han dicho que tendré que hacer si no resolviera este dilema.
ACTUALIZACIÓN: Fui con la solución sup {"text-decoration: none"}, lo hará por ahora. Hay marcas de registro en todas partes, por lo que todo el sitio debería haber sido actualizado, lo que fue más problemas de lo que valió la pena. Gracias a los que respondieron.
Bueno, estoy de acuerdo, parece horrible, pero parece ser solo la forma en que IE combina el subrayado y el superíndice. Le sugiero que vaya con su plan de CSS para eliminar el subrayado de a sup si no puede hacer trampa con un borde. Hay una propiedad solo de IE llamada text-underline-position pero no tiene ningún valor que ayude aquí, me temo.
Para el beneficio de cualquiera que no lo sepa, eso sería:
a sup{text-decoration:none;}
Bueno, no es una solución elegante, básicamente utiliza un borde en lugar de un subrayado. Tendría que codificar el color en función de "Activo, Visionado, 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>®</sup></a>
Eric
La etiqueta <sup> no es genial para cosas como símbolos de marca y registro.
Prefiero hacerlo con css:
<span style=''font-size:75%;vertical-align:super;text-decoration:none''>®</span>
Si puede configurar una clase .reg:
.reg {
font-size:75%;
vertical-align:super;
text-decoration:none
}
Por:
<span class=''reg''>®</span>
La solución de Eric es la más cercana. No necesita display: inline ya que los elementos <a> son elementos en línea. lo único que le falta es la line-height la 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>®</sup></a>
Lo hice funcionar así
print(< a href=''#'' class="underline">Some text< sup >®< /sup > some more text< /a >)
.underline {text-decoration:none; border-bottom:1px solid #FFF;}
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 / subrayar y olvidando que nos estamos refiriendo a la marca de registro, las únicas soluciones que conozco para hacer que se vean iguales son para hacer vertical-align: baseline o matar al text-decoration en el sup.
La solución de borde inferior 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 que un subrayado.
Una alternativa es hacer que la posición <a>: relativa
hacer la posición <sup>: absoluta; arriba: -3px; texto-decoración: ninguno;
agregar un extra & nbsp; después de </ sup>
A veces no puedes agregar clases a un enlace o envolverlo con ningún elemento. La situación no es tan rara cuando necesitas trabajar con código de terceros. Por cierto, el mismo problema con el elemento también.
En este caso, puedes usar algo como esto:
- Deje el subrayado como está para Firefox (todo se ve bien)
Usa ese estilo para Chrome (tiene los mismos problemas que IE, incluso más):
[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 las etiquetas [], todavía no puedo entender cómo este sistema f *** hace ejemplos de código: cuando intento formatear como quiera, me da un desastre.