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碰到包含它的元素的底部的,所以就产生了那几个像素