这可能是一个愚蠢的问题,但如果有更好或正确的方法来做到这一点,我很想学习它。
我遇到过几次,包括最近,在我的 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 元素?