IE中img标签多出5px的空白之4种解决方法

今天我们在网页布局的时候，会发现IE中img样式会多出5px的空白，那怎么办呢？下面给出4中解决办法：

工具/原料

包含img标签的任意源代码片段

代码编辑器

方法/步骤

解决方法1:

设置 img 的 vertical-align: bottom;

ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; } img{ vertical-align:bottom; }

解决方法2:

设置 img 的 margin-bottom: -5px;

ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; } img{ margin-bottom: -5px; }

解决方法3

设置 ul 的 font-size:0;

ul{ width: 280px; font-size: 0; } ul li{ display:block; height:57px; width:277px; }

4

解决方法4

使li浮动，并设置img为块级元素

ul{ width: 280px; } ul li{ float:left; display:block; height:57px; width:277px; } img{ display: block; }