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

问题描述 投票：4回答：7

当我切换到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>
css xhtml doctype
7个回答
14
投票

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

img { vertical-align: bottom }

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

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

希望有道理。

编辑：来自source site的视觉辅助 alt text （来源：brightlemon.com）

7
投票

有关神秘图像间隙的更多信息，请访问：

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

3
投票

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

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

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

2
投票

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

0
投票

试图排除常见错误，我通过修复不少于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>
0
投票

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

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

-1
投票

切换到松散的标准，而不是严格的工作...保持我所需的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">
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.