img与容器下边界的空隙（缝隙） 的解决方法

问题描述：

在使用IE7浏览器时，会遇到一个问题：img标签和div（块级元素）之间的下边界存在距离，表现为一个明显的缝隙或空隙。但这一现象在IE8及更高版本中并不存在。

解决方案：

针对这个问题，我们有两个有效的解决方案。

法宝一：调整img标签的垂直对齐方式。可以尝试将img标签的vertical-align属性设置为bottom、middle或top。

例如，为img标签添加以下样式：

```css

img {

vertical-align: bottom;

}

```

法宝二：调整容器内的字体大小。将容器内的字体大小设置为0，可以有效地解决缝隙问题。例如，为div设置以下样式：

```css

div {

width: 110px;

border: 1px solid 000000;

font-size: 0;

}

```

背后的原因：

图片、文字等内联元素默认与父级元素的基线对齐。而基线与父级底边的距离与字体大小（font-size）和字体家族（font-family）有关。设置vertical-align属性为top、bottom、text-top或text-bottom都可以避免这种现象。这种现象不仅仅出现在li元素中，其他包含img的块级元素也会出现这个问题。

通过调用cambrian.render('body')来渲染页面主体部分。这样，你就可以解决IE7下img与div之间出现的下边界距离问题，使页面在IE7浏览器下也能呈现出完美的视觉效果。