выровнять css в Firefox

Question

У меня есть неупорядоченный список с различными изображениями маркеров, и я пытаюсь выровнять слова для каждого элемента списка по центру.Хотя я могу сделать это в Chrome и Safari, эффект для vertical-align:top не отображается должным образом в Firefox.

Я сделал JS Fiddle прямо здесь .Как я могу изменить CSS, чтобы слова появлялись вертикально в середине каждого маркера в Firefox?

Я копирую HTML-коды JS Fiddle здесь:

<ul>
    <li>Here is line one</li>
    <li>Here is line number two</li>
    <li>three with <a href="#">link</a></li>
</ul>

I'mрепликация кодов JS Fiddle css здесь:

ul li a {
    line-height: 40px;
    vertical-align: top;
}

ul li {
    font-family: Arial,"MS Trebuchet",sans-serif;
    font-size: 12px;
    line-height: 40px;
    margin-left: 60px;
    margin-top: 20px;
    vertical-align: top;
}

ul li:first-child {
    list-style-image: url("http://chinee.heroku.com/assets/venue.png");
}

ul li:nth-child(2){
        list-style-image: url("http://chinee.heroku.com/assets/airport.png");
}

ul li:nth-child(3){
        list-style-image: url("http://chinee.heroku.com/assets/hotel.png");
}

Answer 1

Единственный способ получить согласованные результаты в разных браузерах - это использовать изображения в качестве фоновых изображений, поэтому вместо list-style-image: url("hotel.png"); вы используете background-image: url("http://chinee.heroku.com/assets/hotel.png"); и положение оттуда.

Вот пример: http://jsfiddle.net/dC7xr/