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中的空格来自对其敏感的内联块元素。将其结尾更改为：

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

或

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

<强> jsFiddle example 1

<强> jsFiddle example 2

Webkit bug（？） - 导航证明

1 个答案: