[英]Different look between Google Chrome and Firefox
I work on list this list appear images the last image in the row look like has top margin in firefox but in Google Chrom look perfect I am not good in English so this image explain what I mean :) 我在列表上工作此列表出现图像行中的最后一个图像在firefox中看起来像是具有高边距,但是在Google Chrom中看起来很完美,我的英语不好,所以这个图像解释了我的意思:)
Image explain What I mean : http://filaty.com/i/alpha/74/74f4cb7180dd52b3d8d670bb31be8156 图片说明我的意思: http : //filaty.com/i/alpha/74/74f4cb7180dd52b3d8d670bb31be8156
Html 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 : 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;
}
I use bootstrap to reset browser 我使用引导程序重置浏览器
Code on JSFiddle http://jsfiddle.net/4t6Ch/ JSFiddle上的代码http://jsfiddle.net/4t6Ch/
It is looks like image have some vertical-align. 看起来图像有一些垂直对齐。
Try to add some styles for image: 尝试为图像添加一些样式:
#nwp_port_item li img {
width:100%;
height:auto;
display: block;
margin:0;
padding:0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.