Css 锚定链接获得白色边框或空格

在我的项目中，我试图制作一个带有倾斜端和三角形端的按钮的菜单。但我最终在firefox和ie中留下了一些空白

我采用了您可以在本页上看到的代码：

即

但在chrome中没有这样的空间，只是看起来很好

我的作品可以在这个网站上看到：

请帮我去掉不需要的白色间隔

我也有一个在这里为你们编辑

CSS:

---

谢谢您的帮助。

您只需将选项卡上的左边/右边距更改为-1px，例如

#heroTab li > a {
...
    margin:10px -1px;
...
}

---

这将弥补明显的差距。我认为这是一个渲染角度的问题，所以你必须将它们重叠1px以消除它。请参阅。

使用此样式修复firefox&Ie中的问题

#heroTab li {
  cursor: pointer;
  float: left;
  margin-right: 51px;
}

---

我试过了。谢谢你。但这是正确的解决方案吗？我的意思是，当我在chrome中查看时，没有空间。所以，我想这是一个与浏览器相关的问题。如果没有其他的解决方案，那么你的保证金技巧肯定能解决这个问题。无论如何，我已经在我的项目中使用了这个技巧。但我仍然想知道是否可以在浏览器的基础上解决这个问题。这不是一个特别漂亮的解决方案，但在我看来也没有什么问题。对我来说，稍微重叠以掩盖浏览器差异似乎是唯一的解决办法。我在Chrome和Firefox上看到了差距，但在Safari上没有看到。不应以任何其他方式干扰网站的功能。

#heroTab li {
  cursor: pointer;
  float: left;
  margin-right: 51px;
}