严格的DOCTYPE影响图像之间的间距

当我切换到XHTML Strict DOCTYPE时,我的图像间距有问题.

下面的代码 - 使用Yahoo的重置样式表来消除所有默认的浏览器填充 - 在下面的两个图像之间留下大约4个像素的间隙,但仅当我使用严格的doctype时.为什么是这样？

这只是Chrome和Firefox中的一个问题.IE不会在两个图像之间显示单个像素.

Allain Lalon.. 14

使用Peter的答案作为开始,以下问题解决了这个问题:

img { vertical-align: bottom }

这样做的原因是,默认vertical-align值为is baseline,这相当于文本"行上方"的部分,其中dangly位挂起(小写g,q等都挂在此基线之下).

因此,为了留出空间,这些悬空留下4px的空间.

希望有道理.

编辑:来自源站点的视觉辅助

_{(来源:brightlemon.com)}

使用Peter的答案作为开始,以下问题解决了这个问题:

img { vertical-align: bottom }

这样做的原因是,默认vertical-align值为is baseline,这相当于文本"行上方"的部分,其中dangly位挂起(小写g,q等都挂在此基线之下).

因此,为了留出空间,这些悬空留下4px的空间.

希望有道理.

编辑:来自源站点的视觉辅助

_{(来源:brightlemon.com)}

有关神奇图像间隙的更多信息,请访问:

https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps