Agregar estilos a la etiqueta abbr en IE

Autor：Eve Cole Fecha de actualización：2009-05-31 00:31:34

Introducción

<abbr> se usa para agregar etiquetas XHTML etiquetadas apropiadamente a la abreviatura en la página web (Nota del traductor: aquí, la abreviatura y la abreviatura se consideran por separado, el rango de abreviaturas es mayor que la abreviatura, use la etiqueta <acronym> para la inicial abreviatura), el navegador IE para Windows actualmente no admite la etiqueta <abbr>. En IE, puede aplicar CSS a la etiqueta <acronym> pero no a la etiqueta <abbr>. IE mostrará un mensaje para el atributo de título de la etiqueta <acronym>, pero ignorará la etiqueta <abbr>.

Este error (o característica) de IE ha hecho que algunos usuarios de sitios web piensen que la etiqueta <abbr> es inútil en absoluto, y esto obviamente es incorrecto. Esta etiqueta todavía se maneja correctamente en Mozilla y Opera y es muy importante para la legibilidad y la semántica del contenido web. Por eso seguí buscando una solución y finalmente la encontré.

Solución

Este método se basa en un hecho simple: incluso si IE ignora la etiqueta <abbr>, otras etiquetas anidadas dentro de la etiqueta <abbr> siguen siendo normales. Entonces incrusté una etiqueta dentro de <abbr>, configuré los atributos de título y clase de , y luego <abbr> comenzó a ser lo mismo que la etiqueta <acronym>.

ejemplo de código

Eche un vistazo al código siguiente, un ejemplo sencillo de abreviaturas:

Ahora, compare el código modificado:

operación automática

Incrustar manualmente en cada etiqueta <abbr> es obviamente imposible, aburrido e innecesario para Mozilla y Opera. Afortunadamente, ahora existe una solución alternativa automatizada basada en scripts del lado del cliente.

Es posible que haya notado que las palabras abreviadas en esta página (Nota del traductor: la página del autor original) aparecen incluso en IE, y se agregan estilos CSS (subrayado de puntos y un cursor de mouse con forma de signo de interrogación). Sin embargo, si observa el código fuente, no encontrará la etiqueta mencionada anteriormente. Esto se logra gracias a un simple JavaScript que carga esta página:

función estiloAbbr() {
var oldBodyText, nuevoBodyText, reg
si (es IE) {
oldBodyText = document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1>$2</ABBR>');
document.body.innerHTML = nuevoTextoCuerpo;
}
}
ventana.onload = función(){
estiloAbbr()
};

isIE = (document.all)? verdadero: falso;

Este script verificará el navegador del cliente y, si es IE, reemplazará todas las etiquetas <abbr> con versiones modificadas ( incrustadas). Tenga en cuenta que debemos usar expresiones regulares y atributos internalHTML en lugar del método DOM estándar, porque IE no puede obtener el atributo <abbr> a través del DOM.

Estilo

Un último vistazo al CSS utilizado en esta página. Bastante simple:

abbr, acrónimo, span.abbr {
cursor: ayuda;
borde inferior: 1px discontinuo #000;
}

Mozilla y Opera usan selectores de atributos abbr y acrónimo, e IE usa acrónimo y span.abbr. De todos modos, tanto <abbr> como <acronym> tienen un estilo: el cursor del mouse es un signo de interrogación (cuando el mouse está encima) y un subrayado discontinuo.