Question

当我切换到XHTML Strict DOCTYPE时，我的图像间距出现问题。

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

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

<!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>

Answer 1

以Peter的答案为开头，以下内容解决了这个问题：

img { vertical-align: bottom }

这样做的原因是vertical-align的默认值是baseline，这相当于文本中“dangly位”垂下的部分“（小写g，q，等都挂在这个基线之下）。

因此，为了留出空间，这些空间留下4px的空间。

希望有道理。

编辑：来自source site的视觉辅助
_{（来源：brightlemon.com）}

Answer 2

有关神秘图像缺口的更多信息，请点击此处：

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

Answer 3

使用Firebug表示导致间距的是DIV，而不是图像。

我设置font-size：0;对于顶级div而言，差距消失了。

（奇怪的是，/应该是一个继承的font-size：0;来自reset-min.css中的正文，所以不确定为什么会这样。）

Answer 4

在严格的doctypes中，image变为内联元素，行为类似于文本。因此，您需要更改其vertical-align属性，或将其显示属性更改为display: block或display:inline-block

Answer 5

试图排除常见错误，我通过修复不少于8个验证错误使代码通过验证。

通常，如果浏览器无法解析给定的DOCTYPE中的文档，则结果未指定。

它仍然无法正常使用，但这是验证代码：

<!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" />
    <title>Required</title>
</head>

<body>

    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat1" /></div>
    <div><img src="http://www.catfacts.org/cat-facts.jpg" alt="cat2" /></div>

</body>
</html>

Answer 6

显示：内联块解决方案绝对不适用于我。

vertical-align：bottom解决方案确实有效，但有一点需要注意：根据具体情况，我必须将图像设置为vertical-align：top

Answer 7

切换到宽松的标准，而不是严格的工作...保持我所需的IE格式，但消除了Firefox和Chrome中奇怪的图像间距。

https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Mode

使用了以下行：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

7 个答案: