Estilizando abbr no Internet Explorer 6

Por: Henrique Pereira

Categoria: HTML / CSS / JavaScript

O Internet Explorer 6 (ele novamente) e versões anteriores não reconhecem a tag <abbr>, muito utilizada principalmente como um design pattern em microformats. Ou seja, a maioria das pessoas que o utilizam não conseguem estilizar a tag no Internet Explorer 6. E não adianta dizer para usar a tag <acronym> no lugar de <abbr>, mesmo que o Internet Explorer dê suporte a tag <acronym>. Porque quem usa essas duas tags por livre e espontânea vontade tem um objetivo certo em mente (seja ele em microformats ou não), caso contrário não use nenhuma.

De qualquer maneira você poderá se deparar com contextos em que será necessário estilizar <abbr> para o Internet Explorer 6. Sendo assim existe uma solução em javascript que te ajuda a ter controle sobre o elemento. Veja o script a seguir:

function styleAbbr() {
  var oldBodyText, newBodyText, reg
  if (isIE) {
    oldBodyText = document.body.innerHTML;
    reg = /<ABBR([^>]*)>([^<]*)<\/ABBR>/g;
    newBodyText = oldBodyText.replace(reg, '<ABBR $1><SPAN class=\"abbr\" $1>$2</SPAN></ABBR>');
    document.body.innerHTML = newBodyText;
  }
}

window.onload = function(){
  styleAbbr()
};

isIE = (document.all) ? true:false;

O script (que poderia ser muito mais elegante) pega um elemento <abbr> e adiciona um <span> com a classe .abbr dentro dele. Ou seja, você não precisa colocar esse <span> no código só por causa do IE6. Na hora de criar suas regras de CSS, você pode estilizar normalmente para os browsers modernos e agrupar os estilos para a classe .abbr que será utilizada pelo IE6. Veja um exemplo:

#content abbr, #content .abbr {
    font-size:10px;
    color:#b30101;
    }

Simples e fácil certo?.

Via Sova v siti.

Artigos relacionados:

• CSS Tooltip
• CSS Signatures
• Flexibilidade do CSS em ambientes de CMS
• Conditional Comments no Internet Explorer
• Falso hover no Internet Explorer
• XHTML Media Types
• O Internet Explorer 7 e como manter a versão 6 instalada no Windows XP

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!