0

I'm a little frustrated with the positioning of a CSS triangle on the :after pseudo-element which appears correctly in Chrome and Safari but appears to have a little extra padding or margin in Firefox.

First, screenshots: screenshot of broken chevron in firefox and chrome

The top screen is how "Choose a Subject" appears in Firefox, the bottom how it appears in Chrome and Safari. Obviously this is purely cosmetic, but I'm going for that chevron look.

Here is the markup (for the first item, the darker-blue item is another 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>

Here is the 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;
  }
}

I've tried several different things: using an :after pseudo-element, I used as I am now right: -1em; I've also scrapped than and tried left: 100%; I set the triangle to a :before element and tried an assortment there. I'm stumped.

I tried changing up the fonts, hardcoding the font-size in pixels, mucking with the padding and the margin: nothing I can think of has any effect on that little space.

I appreciate your thoughts.

In case it matters, I am using normalize.css.

Additionally, I would like to add that both Chrome Dev Tools and Firefox Inspector [or whatever they call it ...] show no difference in inherited, computed, or generated styles. They appear the same in every way.

I'm just stumped. Let me know if there's other information I can provide.

Update At your request, the compiled 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;
}
4

2 回答 2

2

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

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>
于 2013-08-08T22:47:51.027 回答
0

在jsfiddle上对此进行了测试。似乎可以解决问题。你能在你的最后尝试吗？

@-moz-document url-prefix() { 
    .pill-menu .primary > .label:after {
        right: -.9em;
    }   
}
于 2013-08-08T21:00:22.240 回答