CSS针对IE6实现网页图片底部留出空白的方法

昨天在优化主题时意外发现IE6浏览器下img标签的一个特殊Bug。当使用块级容器包裹img标签时，在IE6浏览器下，img标签所在的容器底部会出现多余的5px空白。遇到这样的网页结构：

采用HTML代码：

```html

• img-bug.png" img bug">
• img-bug.png" img bug">
• img-bug.png" img bug">
• img-bug.png" img bug">
• img-bug.png" img bug">

```

对应的CSS样式为：

```css

ul {list-style: none; }

li {display: block; width: 200px; height: 40px; }

```

在正常的浏览器如Chrome下，显示结果应为整齐排列的图片，但在古老的IE6浏览器中，你会看到图片下方存在不必要的空白。针对这个问题，有几种解决方案：

方法一：最常见且简单的方法是为img标签的父元素添加 overflow: hidden 属性。这样设置后，li样式中添加 `overflow: hidden;` 就能解决问题。但请注意，如果父元素需要显示超出自身大小的子元素（如绝对定位的子元素），这种方法可能不适用。

方法二：另一种方案是直接为img标签设置 margin-bottom: -5px，即 `img {margin-bottom: -5px; }`，以此消除多余的空白。

方法三：还可以尝试为img标签设置 vertical-align: bottom 属性，让图片的底部与容器的底部对齐，这样也能解决问题。即 `img {vertical-align: bottom; }`。这样设置后，图片在垂直方向上会向下对齐，消除底部的空白区域。以上就是针对IE6浏览器下img标签在块级容器中出现多余空白问题的几种解决方法。在优化网页时遇到此类问题，可以尝试上述方法来解决。如果这些方法无法解决您的问题或者有其他相关疑问，欢迎继续交流。