Hoje eu me deparei com um problema de renderização no Chrome e no Safari, e então o pessoal do meu Twitter falou que é por causa da mesma engine (webkit), que eles usam.
Bom, coloquei uma imagem no código sem o caminho do diretório preenchido: <li><img src="" alt="" class="bdrtop" /></li>. No CSS defini altura, largura, background e display block.
Até ai funcionou direitinho como eu queria, em todos os navegadores, incluindo o IEk 6. Juro! ¬¬
O problema é que no Chrome e no Safari, a rendenrização da imagem era feita com uma borda em volta. É a mesma coisa de quando uma imagem não é encontrada e fica aquela caixinha no lugar.
A solução que encontrei foi colocando essa imagem dentro de um span, então mudei a classe bdrtop para ele: <li><span class="bdrtop"><img src="" alt="" /></span></li>. No CSS coloquei essa imagem com display none.
É, eu sei que poderia ter deixado só o span dentro do li, mas ai deu problema no IEk 6. Quando eu tirava a tag img de dentro dos span's, o navegador ignorava a altura do span, ou do li que eu definia no CSS. Eu sei que não é uma boa prática, mas foi a solução mais rápida.
Pelo menos a dica de img com src vazio, sem que apareça a borda no Chrome e no Safari, funciona!
;)
