幻影白色空间介于2 <li>之间

Question

为新的网站设计构建了一个简单的无下拉水平导航，并且它的工作正常，除了2个按钮之间是一个虚幻的白色空间，并没有出现在蜻蜓的指标中，或者代码，但在li的悬停规则适用时在屏幕上可见。它并没有出现在每个li之间，只是在两个特定的lis之间。我附上的图片显示了我的意思：

没问题，一切看起来都应该如此：

在悬停的li右侧的

是一个不应该存在的空格的px：

＆＃13;

＆＃13;

    .navi {
      display: inline-block;
      height: 50px;
      max-height: 50px;
      overflow: hidden;
      list-style: none;
      float: right;
    }
    .navi li {
      float: left;
    }
    .navi li a {
      padding: 16px;
      border-left: 1px solid #8bd854;
      font-size: 16px;
      text-decoration: none;
      line-height: 50px;
      color: #8c8c8c;
      transition: all 0.5s ease;
    }
    .navi li a:hover {
      background-color: rgba(13, 137, 0, 0.61);
      text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.57);
      color: #fff;
    }

＆＃13;

<ul class="navi">
  <li><a href="">Home</a></li>
  <li><a href="">About</a></li>
  <li><a href="">Lawn Care</a></li>
  <li><a href="">Tree &amp; Shrub Removal</a></li>
  <li><a href="">Contact</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

任何想法可能来自哪里？如果不是可解决的话，这不是一个大问题，但这是一个烦恼。

提前致谢

Answer 1

解决此问题的一种简单方法是使用font-size：

.navi {
    font-size: 0;
}

.navi li {
    font-size: 1rem;
}

这会将列表的字体大小设置为零，将列表元素的字体大小设置为根元素的大小（如果您愿意，可以使用除em之外的任何其他单位）。 / p>

Answer 2

我可以通过将缩放设置为110％来重现Chrome中的问题。也许，您可以将所有导航元素及其子项的缩放设置为zoom: 1.0;。

Answer 3

可能只是空白。试试

<ul class="navi"
  ><li><a href="">Home</a></li
  ><li><a href="">About</a></li
  ...
></ul>

Answer 4

我不完全确定导致这种情况的原因。也许是它的webkit或CSS的一些细微差别，但至少在这一个特定情况下，您可以将display:block添加到.navi li a并将padding: 16px更改为padding: 0 16px同样的规则。不幸的是，我无法弄清楚为什么会有效，但我最好的猜测是空白导致了这个问题。