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

这是由于您的 HTML 中的内联 block 元素中的空白对其敏感。将它的结尾更改为:

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

或

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

jsFiddle example 1

jsFiddle example 2