如果我使用HTML5文档类型,则在Mac上的Chrome,Safari或Firefox中呈现页面时
<!DOCTYPE html>
并将图像放在div中,div一直呈现4像素太高.如果我使用较旧的doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
正确渲染div,其高度与其中的图像相同.这是使用完全相同的HTML和CSS代码.唯一改变的是doctype和额外的4个像素.有没有什么办法解决这一问题？
thi*_*dot 10
http://hsivonen.iki.fi/doctype/
<!DOCTYPE html>=标准模式 - http://jsbin.com/ogacor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">=几乎标准模式 - http://jsbin.com/ogacor/2
要解决此问题,请添加display: block或vertical-align: top(或bottom)img.
首先发生这种情况的原因是imgs是默认inline元素,默认vertical-align值为baseline.基线不会触及包含元素的底部 - 间隙是两者之间的距离.
看到: