为什么我的网页中不断出现小空间？

StackOverflow https://stackoverflow.com/questions/134683

  •  02-07-2019
  •  | 
  •  

题

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

我已经遇到过几次这种情况，包括最近，我的 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 元素？

有帮助吗？

解决方案

空白（包括回车符）通常在所有浏览器中呈现为空格。

您需要将元素一个接一个地放置，但您可以使用一个技巧：

<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 标签并使它们全部向左浮动，然后无论您的 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>

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

由于您不喜欢这种格式，您拥有的唯一其他选项就是破坏 html 标签：

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

在我看来，这是不可取的，或者动态创建 html - 通过 JavaScript 或使用模板系统和动态 html。

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

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

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

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

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

您上面演示的行为是正确的，因为浏览器将回车符视为空格。要修复它，您可以像这样设置它：

a { display: block; float: left; }

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

#nav a { display: block; float: left; }

如果您要在网站上制作选项卡式界面，请花大力气正确完成它，这是值得的。有许多网站都有 CSS 选项卡实现的精彩示例。考虑使用其中之一。

这个 有很多 CSS+Javascript/AJAX 选项卡。或者看 这套简单的 CSS 示例 （一些风格）。最后，看看这个实际上很酷 标签生成器.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top