图片元素img在IE6下出现多余空白问题

在进行网页的DIV+CSS布局时，我们可能会遇到一些浏览器兼容性问题，特别是在IE6（有时Firefox浏览器也可能出现）中，图片元素img下方出现多余空白的问题。这是一个常见且令人头疼的难题。经过多次实践摸索，我们已经总结出了一些解决此问题的常用方法。接下来，我将为大家详细这些方法。

我们可以尝试将图片转换为块级对象。具体来说，就是为img元素设置display属性为block。例如，我们可以添加这样一段CSS代码：sub img {display:block;}。这样做可以消除图片下方可能出现的空白间隙。

我们还可以尝试设置图片的垂直对齐方式。将vertical-align属性设置为“top、text-top、bottom、text-bottom”其中之一，也许能解决问题。例如，我们可以使用这样的CSS代码：sub img {vertical-align:top;}。

还有一种方法是设置父对象的文字大小为0px。在sub中添加一行font-size:0;的代码或许能消除空白。但这种方法也有其弊端，它会导致父对象中的文字无法显示。尽管可以通过设置子对象文字大小来显示文字，但在CSS校验时仍会提示文字过小的错误。

如果父对象的宽、高固定，图片大小随父对象而定，那么可以尝试设置overflow属性为hidden。例如，向sub中添加以下代码：width:88px;height:31px;overflow:hidden;这样可以解决图片下方出现空白的问题。

除此之外，我们还可以尝试设置图片的浮动属性。为img元素添加float:left;的代码可以实现图文混排。但需要注意的是，在实际开发中，这种方法可能会因为代码缩进显示等原因导致出现问题。尽管这种方法可以让我们了解一种可能出现的BUG情况，但在具体解决方案上还需要根据实际情况灵活应对。

以上方法都是在实践中总结出来的经验，对于解决img图片布局下边的多余空隙的BUG非常有帮助。希望这些解决方案能对大家在实际开发过程中遇到类似问题时有所启发和帮助。