Estilizando abbr no Internet Explorer 6

Por: Henrique Costa PereiraFriday 30 March 2007 às 11:30

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.

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!

Tags: CSS IE IE6 Internet Explorer JavaScript

4 Comentários para “Estilizando abbr no Internet Explorer 6”

# 1° Ramon Tuesday 3 April 2007 às 12:3 PM GMT

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…

# 2° O elemento abbr « GiGa Soluções Tuesday 3 April 2007 às 01:3 PM GMT

[...] elemento abbr Hoje li um post no Revolução e etc, que chamou-me a atenção, então resolvi fazer um fast-post, existe um tal elemento abbr, que a [...]

# 3° Willian Tuesday 10 April 2007 às 08:10 PM GMT

O Firebug ta detectando erro na seguinte linha

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

tem algo “anormal” ae ? :p
Obriagdo!

# 4° Tutorial Avançado de HTML: Dominando Texto « Codando Friday 4 July 2008 às 08:4 PM GMT

[...] Por algum motivo frustante, Internet Explorer, o navegador mais comum, não suporta a tag abbr. Por sorte, um cara chamado Marek Prokop desenvolveu uma solução bem legal com javascript pra isso. O Revolução também fez um texto em português sobre essa solução. [...]

Avisos: Os itens com asterisco ( * ) são campos de preenchimento obrigatório.; Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.; Todos devem se identificar através de e-mail válido.; Os e-mails dos usuários não serão divulgados no site.