Question

我在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">

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

wtfspace

我可以想到没有理由这样做，但我的目的是让我的所有按钮链接，所以我也尝试过，看它是否有任何影响。这是新代码：

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

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

enter image description here

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

编辑：哎呀。我忘记了回车变成HTML中的空格字符。仍然，非常感谢回答者。：）

Answer 1

将它们全部放在一行将解决它。

<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"/>

Answer 2

白色空间是回车。删除它，你将是金色的！

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

或

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

通常是当我需要摆脱那个空格时，我在html中如何标记它。

Firefox中图像后的空格字符

2 个答案: