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

我不知道这对于您的网页是否足够通用，但您可以对这些特定的 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>

Answer 3

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

由于您不喜欢格式化，您获得的唯一其他选项是打破html标记：

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

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

Answer 4

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

唯一可靠的方法是避免这种情况，就像你一样，在元素之间不留空格。

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

Answer 5

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

a { display: block; float: left; }

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

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

Answer 6

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

这将为您提供更大的灵活性，并使标记具有可读性。

Answer 7

如果你打算在网站上做一个标签式界面，那么就要花很大力气去做，这样做是值得的。有许多网站都有很好的CSS选项卡实现示例。考虑使用其中一个。

This one有很多CSS + Javascript / AJAX标签。或者看this set of simple CSS examples（有些样式）。最后，看看这个非常酷的tabs generator。

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

7 个答案: