css 在显示图片时的技巧

为了实现网页的一些特效，常常要用到一些height很小的图片

而往往我们都是这样使用图片:

html:

<div id="container">

<img src="/path/to/image" />

</div>

css:

#container {

position: absolute;

left: 0px;

top: 0px;

}

但如果对位置要求较高就会发现这样的用法在显示高度值很小的图片(比如height=1)时会出现定位不准确。

可以用这样的代码测试

<div style="position: absolute; left:0px; top:0px;">
<img src="vline.jpg" />
</div>

<div style="position: absolute; left:0px; top:0px;">
<img src="hline.jpg" />
</div>

<div style="position: absolute; left:0px; top:0px;">
图片
</div>

按代码看似乎所有的元素都会从浏览器的左上角开始显示，但实际结果却是这样:

水平的直线hline.jpg显示在"图片"的下方而不是我们定义的top:0px!

解决方法就是在对应的div中加入

font-size:0;line-height:0;

告诉浏览器这个block的字体和行高都为0

这样在里面的图片才能显示在我们通过position定义的位置上。

update : 发现这个问题出现在XHTML 1.0 Strict下，其他的未经过测试，但如果你也遇到了这个问题，不妨试试这个方法。

Technorati : css, css hack
Del.icio.us : css, css hack