resumino:
.separador {
width:400px;
font-size:1px;
background: #ff0 url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x left;
}

Tiago…, não exite “BUG do height relativo” no IE6. As fontes possuem medidas ascendentes e descendentes. A altura que vc especifica da fonte é a medida entre a base-line até o topo, na maioria das fontes as letras maiúsculas não atingem o topo por uma questão de estética, se for necessário acentuar, a letra maiúscula teria que diminuir de tamanho (fica feio!). A parte descendente (abaixo da base-line) é reservada para caracteres como ç, j e vários outros caracteres.
Alem disso no código do maujor ele também definiu um line-height:1.5em.

Aquele “problema” ocorre porque em CSS também existe herança (HTML é uma estrutura hierárquica) e as propriedades de fontes são herdadas pelos “filhos” (Quando você altera a fonte da classe filha, está fazendo uma sobreposição), Isto ocorre no IE6, FIREFOX, OPERA.
Isto NÃO é um BUG, isto não é ruim, tão pouco um problema (isso ajuda muito)

Observe:

.bloco {
herdou font e color (font:inherit; color:inherit;)
width:400px;
border:1px solid #ccc;
margin:30px 0;
}
.separador {
herdou font e color (font:inherit; color:inherit;)
width:400px;
height:1px;
background:#ff0 url(’sep.gif’) repeat-x left;
}


Mas… o nosso famigerado IE6 renderiza de maneira “diferente” as propriedades width e height de um div em dois casos:

Conteúdo excedente e overflow diferente de hidden
Neste caso quem determina a altura são as propriedades do conteúdo (height, margin-top, margin-bottom, padding-top, assim por diante), o mesmo vale para a largura.

Ausência de conteúdo e overflow diferente de hidden
Neste caso a altura da div será definida por propriedade de altura (da própria div) ou entao pela por propriedades que tem relação com a altura (font, line-height) (padding ocupa espaço na div, ser for utilizado também será gerado um excesso em outros navegadores)

por padrão, oveflow:visible;

é por isso que o IE6 mostra aquele fundo amarelo.
para visualizar estes problemas utilize uma borda de inspeção.

para 2 situações… 2 soluções!
Como disse o Bruno:


.separador {
width:400px;
height:1px;
overflow: hidden;
background: url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x top;
}


ou…


.separador {
width:400px;
height:1px;
lineheight:1px;
background: url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x top;
} isso vai necessitar que exista algum conteúdo dentro da div.. eu sugiro um & nbsp ;
não recomendo esta solução... Estraga o que o CSS tem de melhor (separar programação do design)


Agora… CSS HACK
eu nao conheço nenhum!
quem sabe um _overflow:hidden; mas isso nao faria sentido, não seria necessário o hack.

Maujor mostra essa carta que você tem debaixo da manga…

resumino:
.separador {
width:400px;
font-size:1px;
background: #ff0 url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x left;
}

e logicamente, tirei a cor amarela de fundo…

talvez tenha outro modo… caso ache aki, posto…

.separador {
width:400px;
height:1px;
overflow: hidden;
background: url(’http://i79.photobucket.com/albums/j152/maujor/blog/sep.gif’) repeat-x top;
}

tá tudo funcionando normal aqui…
nenhuma das queixas citadas nesse post

Há várias formas de resolver o problema.
Testei o do Lucas Ferreira acima, e basta o overflow: hidden;

Outra forma também é colocando um line-height:1px; e escrevendo algo dentro da div (pode ser um  ).

Mas acho que com isso aqui ja resolveria não?

overflow:hidden;
margin: 0;
padding: 0;

Obs.: Nem testei, mais a logica é que o overflow ajudasse hehe

Abraços!