Estilizando abbr no Internet Explorer 6

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.