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

当此转换时, 我注意到第一个和第二个图像之间有很小的空间。如果我在所有图像周围做一个“ 文本选择 ”, 我看到它们之间有一个隐蔽的小空白字符 :

"https://i.sstatic.net/0AUPj.png" alt="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>

在此再次显示已选中的输出。现在请注意, 每个图像后面有一个空格 :

""https://i.sstatic.net/qGjty.png" alt="此处输入图像描述"/ >

有人能为这个怪胎想出一个合理的解释吗?这在我的HTML里是问题吗? 或者可能是Firefox的窃听器?有人能想到一个变通办法,或许是CSS?我的第一个本能是玩边际游戏,但我需要的是IE7兼容性,我认为如果我记错的话,它不会产生负边际效应。多谢。

EDIT: 哎呀。我忘了在 HTML 中马车返回会变成一个空间字符。但是, 多亏了回答者。 : : : :

Answer 1

白色空间就是马车的回程把它移开,你就会变成金色!

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

或

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

通常我需要摆脱那个白色空间时都会用我的 html 来标记它。

Answer 2

把它们都放在一条线上就能修好它

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

友情链接