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