Google Chrome和Firefox外觀不同

Question

我在列表上工作此列表出現圖像行中的最后一個圖像在firefox中看起來像是具有高邊距，但是在Google Chrom中看起來很完美，我的英語不好，所以這個圖像解釋了我的意思:)

圖片說明我的意思： http : //filaty.com/i/alpha/74/74f4cb7180dd52b3d8d670bb31be8156

HTML

<ul id="nwp_port_item" class="clearfix">
    <li class="mix webdesign"><img src="images/demo/e1.jpg"></li>
    <li class="mix graphics"><img src="images/demo/e2.jpg"></li>
    <li class="mix wordpress"><img src="images/demo/e3.jpg"></li>
    <li class="mix photography"><img src="images/demo/e4.jpg"></li>
    <li class="mix wordpress"><img src="images/demo/e5.jpg"></li>
    <li class="mix photography"><img src="images/demo/e6.jpg"></li>
    <li class="mix webdesign"><img src="images/demo/e1.jpg"></li>
    <li class="mix graphics"><img src="images/demo/e2.jpg"></li>
</ul>

CSS：

#nwp_port_item {
    margin:20px 0;
    padding:0;
    list-style:none;
    line-height:0;
}
#nwp_port_item li {
    display:block;
    padding:0;
    margin:1px;
    float:left;
    width:180px;
    height:200px;
    overflow:hidden;
    position:relative;
}
#nwp_port_item li img {
    width:100%;
    height:auto;
}

我使用引導程序重置瀏覽器

JSFiddle上的代碼http://jsfiddle.net/4t6Ch/

Answer 1

看起來圖像有一些垂直對齊。

嘗試為圖像添加一些樣式：

#nwp_port_item li img {
    width:100%;
    height:auto;
    display: block;
    margin:0; 
    padding:0;
}