title: pixel difference between Chrome and FF
body: <p>I'm trying to make a "<strong>step by step</strong>", but i'm heaving some problems with <strong>pixel</strong> difference between <strong>chrome</strong> and <strong>FF</strong>.</p>
  
  <p>so, all steps are dynamic and should be in the middle, some times can appear only two, three our 5 options, thats why i'm making a sub-line for each side, to reach the end of the wrapper.</p>
  
  <p>This lines are the problem, they are making 2 our 1 pixels difference.</p>
  
  <p>i'm missing something or in this case, we should make a "workaround" ?</p>
  
  <p>will be more simple if you see in action here: <a href="http://jsfiddle.net/gbBjT/1/" rel="nofollow noreferrer"><strong>jsfiddle</strong></a></p>
  
  <p>for those who wants to see the code directly here:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;article id="people-add"&gt;
  &lt;nav&gt;
      &lt;div class="step-wrapper"&gt;
          &lt;div class="base-left-line"&gt;&lt;/div&gt;
  
          &lt;div class="step first-step"&gt;
              &lt;div class="active-stepc step-circle"&gt;&lt;/div&gt;
              &lt;span class="step-label"&gt;
                  Step 1
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="step"&gt;
              &lt;div class="step-line"&gt;&lt;/div&gt;
              &lt;div class="step-circle"&gt;&lt;/div&gt;
              &lt;span class="step-label"&gt;
                  Step 2
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="step"&gt;
              &lt;div class="step-line"&gt;&lt;/div&gt;
              &lt;div class="step-circle"&gt;&lt;/div&gt;
              &lt;span class="step-label"&gt;
                  Step 4
              &lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="step"&gt;
              &lt;div class="step-line"&gt;&lt;/div&gt;
              &lt;div class="step-circle"&gt;&lt;/div&gt;
              &lt;span class="step-label"&gt;
                  Step 5
              &lt;/span&gt;
          &lt;/div&gt;
  
          &lt;div class="base-right-line"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/article&gt;​
  </code></pre>
  
  <p>and css:</p>
  
  <pre><code>#people-add {
      float: left;
      width: 100%;
  }
  
  #people-add nav {
      padding: 5px 0 60px 0;
  }
  
  .step-wrapper {
      float: left;
      width: 100%;
      text-align: center;
      position: relative;
  }
  
  .step {
      display: inline-block;
      position: relative;
      width: 120px;
  }
  
  .first-step {
      width: 0 !important;
  }
  
  .step .step-label {
      position: absolute;
      right: -35px;
      bottom: -30px;
      font-size: 12px;
      width: 96px;
      text-align: center;
      font-weight: bold;
      color: #818181;
  }
  
  .step .step-line {
      border-bottom: solid #E5E5E5 2px;
      position: absolute;
      right: 5px;
      top: -2px;
      z-index: 12;
      width: 120px;
  }
  
  .step .step-circle {
      background-color: #B3B3B3;
      border: solid 4px #E5E5E5;
      width: 20px;
      height: 20px;
      border-radius: 50px;
      position: absolute;
      right: -1px;
      top: -15px;
      z-index: 13;
  }
  
  .base-left-line, 
  .base-right-line {
      position: absolute;
      width: 50%;
      top: 12px;
      z-index: 1;
  }
  
  .base-left-line {
      border-bottom: 2px solid #9BBD5E;
      left: 0;
  }
  
  .base-right-line {
      border-bottom: 2px solid #9BBD5E;
      right: 0;
  }   ​
  </code></pre>
  
  <p>print:</p>
  
  <p><img src="https://i.stack.imgur.com/9bELX.jpg" alt="Chrome">
  <img src="https://i.stack.imgur.com/sxg7M.jpg" alt="FF"></p>
  
  <p>as you can see, the green line in FF are crossing all over the graylines in the middle of steps.</p>