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.

  • http://gigasolucoes.wordpress.com Ramon

    Olá,

    Tive que faze uma pesquisa sobre isso, infelizmente não sabia dessa tag html, mas graças ao Senhor Sabe Tudo (leia-se: Google) as minha dúvidas foram saciadas, o IEca, é muito chatinho, mas o que podemos fazer. Vale ressaltar, que também existe o atributo abbr, que é diferente do elemento. Agora fiquei com duas dúvidas.

    No IEca 7, tem suporte ao elemento abbr???

    No IEca 6 e anteriores tem suporte ao atributo abbr???

    fuiii…

  • Pingback: O elemento abbr « GiGa Soluções()

  • Willian

    O Firebug ta detectando erro na seguinte linha

    reg = /]*)>([^ < ]*)/g;

    tem algo "anormal" ae ? :p

    Obriagdo!

  • Pingback: Tutorial Avançado de HTML: Dominando Texto « Codando()