为什么小空间会一直出现在我的网页上？

Question

这可能是一个愚蠢的问题,但如果有更好或更好的方法来做到这一点,我很乐意学习它.

我已经碰过这几次,包括最近,我的HTML页面的渲染版本中出现了小空格.直觉上我认为这些不应该存在,因为在文本或实体之外,页面HTML的格式化应该无关紧要,但显然确实如此.

我所指的是这个 - 我从客户端获得了一些关于他们希望他们的网站看起来如何的Photoshop文件.他们希望它看起来基本上像这个文件中的图像像素.

页面中的一个位置需要一个菜单​​栏,每个位置都会在悬停时更改位,就像一个超链接等.在Photoshop文件中这是一个长条,所以一个便宜又简单的方法是将该段拆分为多个图像,然后将它们放在文件中.

所以我本能地将它列出来(有更多内容,但这是要点)

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

等等.

问题是图像之间有这么小的空间,这是不可接受的,因为客户希望这个像素完美(并且它看起来很简单).

让它正确渲染的一种方法是删除图像之间的回车

<a href="page1.html">
  <img src="image1.png" />
</a>
<a href="page2.html">
  <img src="image2.png" />
</a>
<a href="page3.html">
  <img src="image3.png" />
</a>

这使得图像相互对立(所需的效果),但它使得线条非常长并且代码更难以维护(它包含在SO中,这是一个简化版本 - 真正的文件名和JavaScript更长撒在做徘徊).

在我看来,这不应该发生,但它看起来像HTML中的回车被渲染为一个小的空白空间.这种情况发生在所有浏览器中,看起来像.

我认为上面的两个片段应该是一样的是对还是错？有什么我做错了吗？也许用错误的编码保存文件？我应该让这些链接中的每一个都成为一个完美定位的CSS元素吗？

Answer 1

包含空格(包括回车符)通常在所有浏览器中呈现为空格.

你需要一个接一个地放置元素,但你可以使用一个技巧:

<a href="page1.html"><img src="image1.png" 
/></a><a href="page2.html"><img src="image2.png" 
/></a><a href="page3.html"><img src="image3.png" 
/></a>

这看起来有点难看,但它仍然比一条线更好.您可能会更改格式,但想法是在元素内添加回车符而不是它们之间.

Answer 2

我不知道这对于你的页面是否足够通用,但你可以将这些特定的标签分类并将它们全部浮动,然后无论你的HTML格式如何,它们都会聚在一起.

<style>
    a.together {
        float:left;
    }
</style>

<a class='together' href="page1.html"><img src="image1.png" /></a>
<a class='together' href="page2.html"><img src="image2.png" /></a>
<a class='together' href="page3.html"><img src="image3.png" /></a>