html5文档模式遇到的一个样式问题

前阵子工作的时候遇到一个问题，非常纠结：

当一个Div里面放一张图片的时候，div的高度一定会比图片高出一点，大概三到四个像素

<div>
<img src="UploadImg/index/index-2.jpg">
</div>

上面代码，如果图片高度是200px，那么div大概在204px左右，不同浏览器可能有1px的差别，如下图。

网上百度了下：原来是因为我使用了html5的的文档类型：<!DOCTYPE html>，如果把这个换成传统的模式，如：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">就没问题了。

要解决这个问题j就要将div里面的img定义成为display: block，或者将vertical-align定义为top,bottom,middle等就行了。

究其原因，是因为img的两个样式上的默认属性导致的：display:inline;和vertical-align：baseline;这个时候浏览器不会让img碰到包含它的元素的底部的，所以就产生了那几个像素

 

 

 

posted @ 2013-09-08 16:40  蓝色小灰  阅读(181)  评论(0)  编辑  收藏  举报