6

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

我遇到过几次,包括最近,在我的 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 元素?

4

7 回答 7

14

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

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

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

这看起来也有点难看,但还是比单行好。您可能会更改格式,但想法是在元素内部而不是在它们之间添加回车。

于 2008-09-25T17:26:33.633 回答
7

我不知道这对于您的页面是否足够通用,但是您可以对这些特定的 a标签进行分类并将它们全部浮动,然后无论您的 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>
于 2008-09-25T17:30:11.377 回答
2

这是 HTML 规范的一部分 - 空格在标记中,因此它们被视为文档的一部分。

由于您不喜欢格式,您唯一的其他选择是打破 html 标签:

  <a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a
  ><a href="..."><img src=".." /></a

我认为这是不可取的,或者动态创建 html - 通过 JavaScript 或使用模板系统和动态 html。

于 2008-09-25T17:27:53.490 回答
2

原因很简单:在 HTML 中,空白很重要,但只有一次。重复的空白被忽略,只显示第一个。

避免这种情况的唯一可靠方法是,正如您所做的那样,在元素之间不放置空格。

当基于表格的布局比现在少时,您可以使用零边框、零填充表格来对齐元素,同时将它们放在源代码中的单独行上。

于 2008-09-25T17:33:40.077 回答
2

您在上面演示的行为是正确的,因为浏览器将回车视为空格。要修复它,您可以使用以下方式设置它的样式:

a { display: block; float: left; }

请注意,上述规则适用于所有链接,因此您可能只想将选择器缩小到某些元素,即:

#nav a { display: block; float: left; }
于 2008-09-25T17:33:51.073 回答
2

我处理这个问题的方法是使用一个无序列表,并让每个图像/链接成为一个项目。然后使用 CSS 内联显示每个项目并将它们浮动到左侧。

这将为您提供更大的灵活性并使标记非常易读。

于 2008-09-25T17:36:13.330 回答
1

如果你要在网站上做一个选项卡式界面,请花大力气把它做好,这将是值得的。有很多网站都有很好的 CSS 选项卡实现示例。考虑使用其中之一。

这个有很多 CSS+Javascript/AJAX 选项卡。或者查看这组简单的 CSS 示例(一些样式)。最后,看看这个非常酷的标签生成器

于 2008-09-25T17:33:49.437 回答