html - Webkit 错误 (?) - 导航合理化

Question

我有一个合理的水平导航，但 webkit 总是在右端有一点空间。你知道有什么问题吗？

这是代码：

HTML

<nav class="navJustify">
  <a href="#">Link1</a>
  <a href="#">Link2</a>
  <a href="#">Link3</a>
  <a href="#">Link4</a>
  <a href="#">Link5</a>
  <a href="#">Link6</a>
  <a href="#">Link7</a>
  <a href="#">Link8</a>
</nav>

CSS

nav.navJustify {
   text-align: justify;

   background-color: black;
}

nav.navJustify:after {
   content: '';
   display: inline-block;
   width: 100%;
}

nav.navJustify a {
   position: relative;
   display: inline-block;

   width: 12%;
   background-color: yellow;
}

我做了一个 jsFiddle，所以你可以明白我的意思（在 Chrome/Safari 中）：jsFiddle。

Answer 1

这是由于对它敏感的 inline-block 元素中的 HTML 中的空白。将其结尾更改为：

<a href="#">Link8</a></nav>

或者

<a href="#">Link8</a><!--
--></nav>

jsFiddle 示例 1

jsFiddle 示例 2