Problema de redenrização de imagem Chrome e Safari

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!

;)