firefox中垂直對齊css

Question

我有一個不同的子彈圖像的無序列表，我試圖對齊每個列表項的單詞垂直居中。雖然我可以在Chrome和Safari中執行此操作，但在Firefox中vertical-align:top的效果不能正確顯示。

我做了JS Fiddle right here。我該如何修改css，以便在Firefox的每個子彈的中間垂直出現文字？

我在這裏複製JS小提琴的html代碼：

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

我在這裏複製JS小提琴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

跨瀏覽器得到一致的結果的唯一方法是將列表圖像作爲背景圖像應用，因此您可以使用background-image: url("http://chinee.heroku.com/assets/hotel.png")而不是list-style-image: url("hotel.png");;並從那裏的位置。

下面是一個例子： http://jsfiddle.net/dC7xr/