html - Firefox 中 <a> 标签之间的间距为 1px

Question

我在父元素上使用了 font-size: 0; ，这就是我如何让链接没有空格，但空格在 Firefox 中仍然存在。

请先在 Firefox 中进行测试，然后在任何其他浏览器中进行测试，您会发现 Firefox 在链接之间显示了一个空格(尽管为 1px)，而其他浏览器则没有这样做......好吧IE6&7 但我们不谈它们...

http://jsfiddle.net/uZMzA/

有人知道为什么吗？我如何在不使用 javascript 确定浏览器的情况下解决这个问题？

Answer 1

发生这种情况的原因是因为 a 标签之间有一个带有换行符的文本节点。由于您设置了 letter-spacing: 1px; 并且 Firefox 编码人员已选择按照他们现有的方式实现字母间距，因此您将在该文本节点之后或之前获得 1px 的字母间距。

正如其他地方已经暗示的那样，解决方案是更改 div#navigation 的规则，使其中不包含行 letter-spacing: 1px ，如下所示:

div#navigation {
  position: relative;
  padding: 1px 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-family: Georgia, Serif;
  margin: 0 auto 2px auto;
  width: 400px;
  font-size: 0;
  text-shadow: 0 1px #fff;
}

您可以在此处查看应用了修复程序的工作版本:http://jsfiddle.net/uZMzA/10/