3

我在 Firefox 12 中偶然发现了一些奇怪的行为。考虑以下 HTML：

<!DOCTYPE html>
<img src="resources/csv.png">
<img src="resources/globe.png">
<img src="resources/clock.png">
<img src="resources/key.png">
<img src="resources/delete.png">

渲染时，我注意到第一张和第二张图像之间有一个小空间。如果我围绕所有图像进行“文本选择”，我会看到它们之间有一个偷偷摸摸的小空白字符：

世界空间

我想不出任何理由，但我的目的是让我所有的按钮链接，所以我也尝试过，看看它是否有任何效果。这是新代码：

<!DOCTYPE html>
<a><img src="resources/csv.png"></a>
<a><img src="resources/globe.png"></a>
<a><img src="resources/clock.png"></a>
<a><img src="resources/key.png"></a>
<a><img src="resources/delete.png"></a>

再一次，这里是渲染的输出，已被选中。注意现在每张图片后面都有一个空格：

在此处输入图像描述

谁能想到这个怪癖的合乎逻辑的解释？这是我的 HTML 中的问题，还是 Firefox 中的错误？谁能想到一个解决方法，也许是 CSS？我的第一直觉是使用边距，但我需要兼容 IE7，如果我没记错的话，我认为它不适用于负边距。非常感谢。

编辑：哎呀。我忘了回车会变成 HTML 中的空格字符。尽管如此，还是非常感谢回答者。:)

4

2 回答 2

4

将它们全部放在一条线上将解决它。

<img src="resources/csv.png"/><img src="resources/globe.png"/><img src="resources/clock.png"/><img src="resources/key.png"/><img src="resources/delete.png"/>

但这可能很麻烦。如果您想保留一些可读性，您可能会执行类似...

   <img src="resources/csv.png"/><!--
--><img src="resources/globe.png"/><!--
--><img src="resources/clock.png"/><!--
--><img src="resources/key.png"/><!--
--><img src="resources/delete.png"/>
于 2012-05-23T17:58:48.270 回答
3

空格是回车符。删除它，你会是金色的！

<img src="one.jpg"><img src="two.jpg">

或者

<a href="#"><img src="one.jpg"></a><a 
href="#"><img src="two.jpg"></a>

当我需要摆脱那个空白时，通常是我在我的 html 中标记它的方式。

于 2012-05-23T17:49:52.443 回答