在Mac上使用Chrome，Safari或Firefox渲染页面时，如果我使用HTML5 doctype
<!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个像素。有什么方法可以解决这个问题吗？
答案 0 :(得分：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。
首先发生这种情况的原因是img默认为inline个元素，默认vertical-align为baseline。基线不会触及包含元素的底部 - 间隙是两者之间的距离。
请参阅：
答案 1 :(得分：1)
HTML5指定应该呈现元素中的空格。因此，你得到额外的4px，如果你将font-size设置为0，那么空间就会消失。