Question

嗨，我正在做一个非常简单的导航器，但我只是遇到了一个奇怪的问题，我无法弄清楚它来自哪里。

我的分离不完全是直到，它们以相同的方式创建.. 有些比其他更难，我不明白为什么。

可能是由于字体？我尝试使用不同的浏览器，问题仍然存在......

代码非常简单：

HTML

<nav id="main-menu2">
  <a href="/"><span class="fa fa-home"></span></a>
  <a href="/">DERNIÈRES MINUTES</a>
  <a href="/">SÉJOURS</a>
  <a href="/">CROISIÈRES</a>
  <a href="/">CIRCUITS</a>
  <a href="/">FRANCE</a>
  <a href="/">WEEK-ENDS</a>
  <a href="/">VOYAGE À LA CARTE</a>
  <a href="/">PROMOS</a>
</nav>

SCSS

$darkOrange: #ed6d00;
#main-menu2 {
  background-color: $darkOrange;
  width: 100%;
  text-align: center;
  font-size: 0.7em;
  a{
    color: #fff;
    text-decoration: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    margin-left: -2px;
    margin-right: -2px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.3em;
    line-height: 1.7em;
  }
  .fa-home{
    font-size: 23px;
    position: relative;
    top: 2px;
    }
}

Answer 1

我无法重现该错误，但我可能有一个解决方案：您目前正在使用不需要的边框。让我解释一下：在Séjours上有一个边界，在Croisières上还有一个边界。所以有2个边框，你现在正在隐藏其中一个。

在em中使用font-size，使你的技巧（margin-left / margin-right：-2px）不一致，因为em无法真正转换为px（它可以，但它取决于在浏览器计算上，你可能需要超过2px才能使边框超过另一个，也许1px可能是1.5487px）。

所以，我的解决方案：删除所有不必要的边框：

a {
   border-left: 1px solid #fff;
} 
a:last-child {
   border-right: 1px solid #fff;
}

不再有边框重叠，更可靠的解决方案。

Answer 2

使用font-size：

进行管理

#main-menu2 {
    font-size: 0;
}

#main-menu2 a {
    font-size: 14.5px;
    margin-left: -1px;
    margin-right: 0;
}

整个代码：

$darkOrange: #ed6d00;
#main-menu2 {
  background-color: $darkOrange;
  width: 100%;
  text-align: center;
  font-size: 0;
  a{
    color: #fff;
    text-decoration: none;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    margin-left: -1px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14.5px;
    line-height: 1.7em;
  }
  .fa-home{
    font-size: 23px;
    position: relative;
    top: 2px;
    }
}

演示：JSFiddle

这是因为在你的代码中，你可以通过缩进文本来获得一些空间。不幸的是，所有浏览器都将这些内容解释为空格，因此元素之间存在一些差距。

边框中像素的差异我无法确定它来自

2 个答案: