幻影白色空间介于2 之间(Phantom white space between 2 s)

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

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

在悬停的李的右侧是一个不应该存在的空格的px： 

    .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;
    } 
  
<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> 
  
 

 

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

 提前致谢 
built a simple no-dropdown horizontal nav for a new site design and its all working fine like normal except that between 2 buttons is a phantom white space that doesn't appear in dragonfly's metrics, or in the code, but is visible on the screen when the li's hover rule applies. and it does not appear between each li, just between 2 specific lis. i have attached images below showing what i mean:
 

no problem, everything looks as it should: 
 

on the right side of the hovered li is a px of whitespace that shouldnt be there: 
 

 
 
  
  
    .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;
    } 
  
<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> 
  
 

 

any idea where this may be coming from? It's not a huge deal if not Solvable but it is an annoyance.
 

Thanks in advance

                
最满意答案

                
                    
                        
 我不完全确定导致这种情况的原因。 也许它是webkit或CSS的一些细微差别，但至少在这一个特殊情况下，你可以添加display:block to .navi li a并将padding: 16px改为padding: 0 16px在同一规则上。 不幸的是我无法弄清楚为什么会有效，但我最好的猜测是空白导致问题。 
I'm not entirely sure what is causing this. Maybe it's webkit or some nuance of CSS, but at least in this one particular case, you can add display:block to .navi li a and change padding: 16px to padding: 0 16px on that same rule. Unfortunately I can't figure out why this works but my best guess is that whitespace is causing the issue.

更多推荐