Adicione estilos à tag abbr no IE

Autor：Eve Cole Data da Última Atualização：2009-05-31 00:31:34

Introdução

<abbr> é usado para adicionar tags XHTML apropriadamente rotuladas à abreviatura na página da web (Nota do tradutor: aqui, a abreviatura e a abreviatura são consideradas separadamente, o intervalo de abreviatura é maior que a abreviatura, use a tag <acronym> para a inicial abreviatura), o navegador IE para Windows atualmente não suporta a tag <abbr>. No IE, você pode aplicar CSS ao <acronym>, mas não à tag <abbr>. O IE exibirá um prompt para o atributo title da tag <acronym>, mas ignorará a tag <abbr>.

Esse bug (ou recurso) do IE fez com que algumas pessoas do site pensassem que a tag <abbr> é totalmente inútil, e isso está obviamente errado. Esta tag ainda é tratada corretamente no Mozilla e no Opera e é muito importante para a legibilidade e semântica do conteúdo da web. Por isso continuei procurando uma solução e finalmente a encontrei.

Solução

Este método é baseado em um fato simples: mesmo que o IE ignore a tag <abbr>, outras tags aninhadas na tag <abbr> ainda serão normais. Então, incorporei uma tag dentro de <abbr>, defini os atributos de título e classe de e então <abbr> começou a se tornar igual à tag <acronym>.

exemplo de código

Dê uma olhada no código abaixo, um exemplo simples de abreviaturas:

Agora, compare o código modificado:

operação automática

Incorporar manualmente em cada tag <abbr> é obviamente impossível - chato e desnecessário para Mozilla e Opera. Felizmente, agora existe uma solução alternativa automatizada baseada em script do lado do cliente.

Você deve ter notado que as palavras abreviadas nesta página (Nota do tradutor: a página do autor original) são solicitadas até mesmo no IE, e estilos CSS (sublinhado pontilhado e um cursor do mouse em forma de ponto de interrogação) são adicionados. No entanto, se você olhar o código-fonte, não encontrará a tag mencionada acima. Isto é conseguido graças a um JavaScript simples que carrega esta página:

função estiloAbbr() {
var oldBodyText, novoBodyText, reg
if (éIE) {
oldBodyText=document.body.innerHTML;
reg = /<ABBR([^>]*)>([^<]*)</ABBR>/g;
newBodyText = oldBodyText.replace(reg, '<ABBR $1>$2</ABBR>');
document.body.innerHTML = novoBodyText;
}
}
janela.onload=função(){
estiloAbbr()
};

éIE = (document.all) ? verdadeiro:falso;

Este script verificará o navegador do cliente e, se for IE, substituirá todas as tags <abbr> por versões modificadas ( incorporadas). Observe que devemos usar expressões regulares e atributos innerHTML em vez do método DOM padrão, porque o IE não pode obter o atributo <abbr> através do DOM.

Estilo

Uma última olhada no CSS usado nesta página. Muito simples:

abbr, acrônimo, span.abbr {
cursor: ajuda;
borda inferior: 1px tracejado #000;
}

Mozilla e Opera usam seletores de atributos abbr e acrônimo, e o IE usa acrônimo e span.abbr. Independentemente disso, tanto <abbr> quanto <acronym> são estilizados - com um ponto de interrogação (quando o mouse está sobre) e um sublinhado tracejado.