如何重新创建占用一行文本的<img/>标记？

Question

我有一个问题，即1x1像素在页面上添加了一些额外的空间（高度超过1px）。在做了一些快速的谷歌搜索后，我发现这是一个常见的问题。我的理解是标签是内联的，因此被解释为文本。

1. Extra spacing after an A Tag/img tag?
2. Extra padding under an <img> tag?
3. Image inside div has extra space below the image

我的问题是虽然我可以在实时网站上复制修复程序 - 当我删除标记或将其样式更改为display: block时，多余的空间消失了 - 我无法在简化的HTML上复制问题页。即使我将link #3中的确切代码复制到新的HTML文档中，我也无法使用与链接3 完全相同的代码复制 问题。< / p>

我想了解在推出生产级修复之前究竟是什么导致了这个问题。有没有人对这究竟是什么因素有任何想法？

编辑：我附上link #3代码实施的截图。



EDIT2：我正在附加完全相同的JSFiddler代码的另一个屏幕截图。那么发生了什么？



[mooved comment to question] 我的问题不是导致问题的原因。我的问题是为什么我在Chrome中看到两个使用相同代码的不同内容。我在我的问题上附上了两张图片。在这两个图像中，您应该看到相同的HTML标记和相同的CSS。然而，Chrome以不同的方式呈现它们我的问题是导致这种差异的原因。

Answer 1

好的，我希望我是那个了解你的人。 你有完全相同的代码在完全相同的浏览器上显示不同，只有你的主机上的一个和JS Fiddle上的另一个。

要回答你的问题，这是一个线路高度问题，如果你出错了，没有定义正确的行高值，请参阅UPDATE HERE 你应该在px，pt，cm等处使用固定的线高。 数字表示当前字体大小的倍数。这就是差异所在，因为JS Fiddle使用css重置并具有不同的默认字体大小。

您可以将行高更改为1px，也可以应用vertical-align:top;

Answer 2

关于为什么它与浏览器不同的问题：浏览器应用自己的样式。

请参阅http://www.iecss.com/，了解IE如何以不同的版本显示元素。

要解决您的问题，您必须“重置”样式，以便浏览器可以提出问题。

你必须设计元素的样式，oterwhise，浏览器将。

#wrapper img{display:block;line-height:0}

此外，搜索样式优先级，特异性，继承和级联

查看您的fiddle updated

[重新阅读您的问题后] 我的问题是为什么我在Chrome中看到两个使用相同代码的不同内容。

你是DRUNK！

[阅读完最后评论后] 啊，问题是DOCTYPE！

减慢酒精含量。

你不能理解你的问题而向我投票。

Cheerz！