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

StackOverflow https://stackoverflow.com/questions/489974

  •  20-08-2019
  •  | 
  •  

题

我有我的图像间距问题，当我切换到严格的XHTML DOCTYPE。

下面的代码 - 它使用雅虎的复位样式表来杀死所有的默认浏览器填充 - 叶的大约4个像素下方的两个图像，但之间的间隙只有当我使用严格的DOCTYPE。这是为什么？

这是只有在铬和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>
有帮助吗？

解决方案

使用彼得的回答作为启动以下的解决了这个问题：

img { vertical-align: bottom }

此工作的原因是，对于vertical-align默认为baseline，这相当于在垂吊位下垂“线条以上”的文本的部分（下壳体G，Q等所有挂起该基线下文）。

因此，为了留有余地它离开的空间4像素为这些突出端。

希望有所是有意义的。

编辑：从源网站结果，视觉辅助 “替代文字” 结果 <子>（来源： brightlemon.com ）

其他提示

使用萤火虫表明，它是使间距，而不是图像的DIV。

我设置字体大小：0;用于顶部DIV和间隙消失。

（奇怪的是，有/应该是一个继承字体大小：0;从复位min.css所以不知道为什么这工作的机构）

在严格的文档类型，图像成为一个内联元件，以及行为像文本。因此，你需要改变它的vertical-align属性，或改变其显示属性，以display: block，或display:inline-block

试图排除常见错误，我通过固定不小于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>

在显示：内联块溶液绝对没有为我工作

在垂直对齐：塔底溶液做了工作，但有一点需要注意：根据情况，有我不得不代替设置为垂直对齐的图像：顶

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

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">
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top