Firefox是否为我绝对定位添加了一些隐形填充或边距：三角形后？

Question

我对在CSS和Safari中正确显示的伪后元素的CSS三角形定位感到有点沮丧，但在Firefox中似乎有一些额外的填充或边距。

首先，截图：

顶部屏幕是Firefox中显示“选择主题”的方式，它是Chrome和Safari中显示的底部。显然，这纯粹是装饰性的，但我会选择那种雪佛龙的外观。

这是标记（对于第一个项目，深蓝色项目是另一个项目）：

<nav class="menu pill-menu inline" role="navigation">

<!-- Major Category
======================
--> <ul>

    <li class="has-subnav primary">

      <input type="checkbox" id="primary-menu" class="checkbox-toggle"/>
      <label class="label" for="primary-menu">                                      

        Choose a Subject

      </label>                                     
    </li>

  </ul>
</nav>  

这是Sass：

.pill-menu {

  & > ul > li { display: inline-block; }
  .primary > .label,
  .secondary > .label {
    @include css-transition(all, .2s, ease-out);    
    cursor: pointer;
    padding: .5em;
    position: relative;
  }

  .primary > .label {
    border-radius: 5px 0 0 5px;
  }

  .primary > .label:after {          
      border-top: 18px solid transparent;
      border-bottom: 18px solid transparent;
      border-left: 18px solid $light-blue-object; // TODO: Abstract This  
      content: "";        
      height: 0; 
      right: -1em;
      top: 0;
      position: absolute;        
      width: 0;
      z-index: 1;
  }
} 

我尝试了几种不同的东西：使用：after伪元素后，我使用了，因为我现在正确：-1em;我也报废了并试过左：100％;我将三角形设置为：在元素之前并在那里尝试分类。我很难过。

我尝试更换字体，硬编码字体大小（以像素为单位），使用填充和边距进行修改：我能想到的任何内容都对这个小空间没有任何影响。

感谢您的想法。

如果重要，我使用的是normalize.css。

此外，我想补充一点，Chrome Dev Tools和Firefox Inspector [或他们称之为的任何东西......]在继承，计算或生成的样式上没有显示出差异。它们在各方面看起来都是一样的。

我只是难过。如果我能提供其他信息，请告诉我。

更新 根据您的要求，编译的CSS：

.pill-menu .primary > .label:after {
  border-bottom: 18px solid transparent;
  border-left: 18px solid #50afdf;
  border-top: 18px solid transparent;
  content: "";
  height: 0;
  right: -1em;
  position: absolute;
  top: 0;
  width: 0;
  z-index: 1;
}

.pill-menu .primary > label {
  background-color: #50afdf;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  padding: .5em;
  position: relative;
  transition: all .2s ease-out;
}

Answer 1

它不是边距或填充，而是空格。只需删除标签内不必要的空格/换行符/标签即可。

http://cssdeck.com/labs/v2f8qedp

<!-- Major Category
======================
--> <ul>

    <li class="has-subnav primary">

      <input type="checkbox" id="primary-menu" class="checkbox-toggle"/>
      <label class="label" for="primary-menu"> Choose a Subject</label>                                     
    </li>

  </ul>
</nav>

Answer 2

在jsfiddle上对此进行了测试。似乎解决了这个问题。你可以尝试一下吗？

@-moz-document url-prefix() { 
    .pill-menu .primary > .label:after {
        right: -.9em;
    }   
}