css - Firefox 是否在我的绝对定位 :after triangle? 中添加了一些不可见的填充或边距

Question

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

先上截图:

顶部屏幕是“选择主题”在 Firefox 中的显示方式，底部是它在 Chrome 和 Safari 中的显示方式。显然这纯粹是装饰性的，但我更喜欢 V 形外观。

这是标记(对于第一个元素，深蓝色元素是另一个 li):

<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;我也放弃了并尝试了 left: 100%;我将三 Angular 形设置为一个 :before 元素并尝试在那里进行分类。我很难过。

我尝试更改字体、硬编码字体大小(以像素为单位)、处理填充和边距:我想不出对那个小空间有任何影响。

我很欣赏你的想法。

以防万一，我使用的是 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>