CSS фальшивый HR с фоновым изображением

Question

Я хочу иметь HR как фоновое изображение. файл gif размером 2 пикселя.
Я посмотрел в стилизации HR тега, но слишком много вопросов браузера ..

Пользовался 2px высокой DIV с изображением, как Б.Г., но в IE6, есть обивка я не могу избавиться.
Любые предложения приветствуются!

CSS:

.hr { 
    margin: 0; padding: 0; 
    height: 2px; 
    background-image: url('images/help-hr.gif'); 
    background-repeat: repeat-x; 
    background-color: green; /* just to see the padding in IE6 */ 
} 

HTML:

<p>sky</p> 
<div class="hr"></div> 
<p>grass</p> 

Answer 1

Добавить переполнение: скрыто;

.hr { 
    margin: 0; padding: 0;  
    height: 2px;  
    background-image: url('images/help-hr.gif'); 
    background-repeat: repeat-x; 
    background-color: green; /* just to see the padding in IE6 */ 

    overflow:hidden; 
} 

Answer 2

Я не знаю ответа на вопрос IE6 вы имеете дело с, но у меня была такая же проблема с использованием hr и found a solution что работал для меня:

hr { 
    background-color: #ccc; 
    border-width: 0; 
    color: #ccc; 
    height: 2px; 
    line-height: 0; 
    margin: -.5em 10px 1.8571em 10px; 
    page-break-after: always; 
    text-align: center; 
    width: 80%; 
} 

hr:after { 
    content: "\a7\a7"; 
    font-size: 1.25em; 
}