Bug em textos com negrito carregados via ajax no IE7
Palavra do Editor: nosso amigo Leandro publicou esse artigo relatando um bug, sem solução (a solução dele é “não use”.) Se você conhece uma solução melhor, por favor, escreva um comentário ou um novo artigo em resposta a esse.
O problema
Estava lá eu, todo pimpão e alegre em casa, fazendo minhas requisições em ajax funcionar em um projeto que ando trabalhando e quando decido testar em outros navegadores, tal como o nosso excelentíssimo Internet Explorer 7 eu percebo: “Olha mãe! A requisição funcionou beleza no ie7″. Sim, funcionou sim com um pequeno inconveniente: parte do conteúdo carregado “on-the-fly” pela requisição ‘ajax’ veio meio distorcida (print screen com o trecho bugado) e eu então percebi que essas distorções (que na verdade são problemas de anti-aliasing desabilitado no ie7 ou algo do gênero) seguem um padrão para que elas aconteçam: qualquer texto que esteja em negrito carregado pela requisição ajax sofrerá desse problema.
Causas
- Processar algoritmos de anti-aliasing (anti serrilhamento) deve ser um processo diferente para textos em negrito e talvez o pessoal do desenvolvimento da MS esqueceram de mandar processar esses algoritmos para textos em negritos carregados via ajax e ninguém avisou eles! Coitadinhos!
- Ou simplesmente o algoritmo não funciona nesses casos de requisição via ajax. Afinal, who cares!
Solução
Para falar a verdade o porque disso acontecer não é muito importante. O importante é que eu aparentemente não achei solução para esse problema e a melhor dica que dou para contornar isso é: evite usar textos em negritos dentro de pedaços de html oriundas de requisições em ajax no ie7. Existem N maneiras de se fazer isso e a mais simples delas, IMO, é modificar os seletores CSS de modo que não tenham valores que os negritem (no caso font-weight:700; ou font-weight:bold; são exemplos de propriedade/valor que negritam o texto) somente no Internet Explorer 7.
Uma das formas de se fazer isso é fazer um seletor para tais texto parecido com esse (CSS):
.no-ie7-bold {font-weight:700 !important;font-weight:normal;}
Aí toda vez que você tiver textos que precisem ser negritados oriundos de requisições em ajax use uma classe semelhante a essa acima nos devidos elementos. Ela fará com que o texto não seja negritado apenas no IE7 (minto, no IE6 também não será e talvez nos seus ancestrais idem). Mas acredito eu que existam hacks de seletores que apenas o IE7 entenda. Sinta-se livre para melhorar a receita do bolo. Meu papel aqui é basicamente reportar esse bug nefasto do IE7.
Entry Details
Publicado em 02/06/2008 às 02:06 em Ajax, CSS, Javascript

Eu considero que devolver resposta html em Ajax é coisa depreciada já.
O certo seria devolver XML ou um Objeto JSON do que você quer, dae montar o html dentro do próprio javascript.
Olha só, bug interessante… *indo abrir meu IE7 e fazer um teste.
De qq maneira, o comentário do Julio aqui em cima faz sentido. Mas nem sempre… em alguns casos, não tem o pq. retornar um XML (ou JSON, ou qualquer outro formato de troca de dados). De qq. forma, seria uma maneira de contornar o problema!
E, ótimo blog.
Só que aí você estará perdendo produtividade, estaria engessando cada tipo de resposta a um tipo de estrutura (HTML) e estaria aumentando o tempo de processamento do JS para o ‘parsing’ de cada estrutura (em JSON ou XML) retornada.
O ideal é você criar microformatos em HTML bem definidos com o mínimo de atributos possíveis. Afinal um (X)HTML bem formado é tido como documento XML, não é?
Hoje em dia muitas frameworks web como Ruby on Rails já lidam muito bem com o Ajax. Você afinal, pode muito bem definir o tipo da resposta a ser retornada pela sua própria API server-side.
Exemplo:
http://opa.com/req-ajax.json?client=joao => retorna em JSON
http://opa.com/req-ajax.xml?client=joao => retorna em XML
http://opa.com/req-ajax.html?client=joao => retorna em HTML
Essa parte server-side de lidar com resources (essas URIs de extensÕes variáveis) pode muito bem ser configurada em um servidor que rode PHP, Python ou Ruby. Fica ao seu critério. =]
@Chris
Opa, quando testar dê um feedback aqui e fala se aí também ocorre o mesmo. Esse problema que relatei não foi constatado apenas por mim, antes que alguém possa vir me crucificar aqui. Ou seja, não foi um fato isolado, aconteceu com mais ‘testers’ do que apenas eu.
Leandro, me deparei com o mesmo problema e acredite tem solução… é só setar um background-color pra div em que vc retorna o resultado. Acontece só no IE mesmo.
t+
Ahhhhhh rapaz! É, bem que faz muito sentido mesmo!
Muito obrigado pela resposta, Lucas! Muito grato!
Vou tentar fazer um update no post notificando a solução.