严格影响图片间距的DOCTYPE [英] Strict DOCTYPE affecting spacing between images
问题描述
我切换到XHTML严格DOCTYPE时，我的图片间距有问题。
I am having problems with my image spacing when I switched to XHTML Strict DOCTYPE.
以下代码 - 使用Yahoo的重置样式表来终止所有默认浏览器填充 - 在下面的两个图像之间留下一个大约4像素的差距，但只有当我使用严格的doctype。为什么是这样？
The following code - which uses Yahoo's reset stylesheet to kill off all default browser padding - leaves a gap of about 4 pixels between the two images below but ONLY when I use the strict doctype. Why is this?
这只是Chrome和Firefox的问题。 IE不会在两个图片之间显示单个像素。
It is only a problem in Chrome and Firefox. IE doesn't show a single pixel between the two images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>
<body>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
</body>
</html>
推荐答案
使用Peter的回答作为开始， ：
Using Peter's answer as a start the following fixes the problem:
img { vertical-align: bottom }
这样做的原因是 vertical-align 的默认值为 baseline ，这等于文本在线之上的部分，其中固定位悬挂（小写字母g，q等等都悬挂在该基线下面）。
The reason this works is that the default for vertical-align is baseline, which equates to the part of the text "above the line" where the dangly bits hang down (lower case g, q, etc all hang below this baseline).
因此，为了离开房间，它为这些悬垂留下了4px的空间。
So in order to leave room it was leaving 4px of space for these overhangs.
希望有意义。
编辑：从源网站
Visual aid from source site
这篇关于严格影响图片间距的DOCTYPE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
