title: Firefox :before position absolute incorrect
body: <h2><a href="https://stackoverflow.com/questions/5148041/does-firefox-support-position-relative-on-table-elements">[Duplicate of Does Firefox support position: relative on table elements?]</a></h2>
  
  <p>I have an unordered list with vertical rules between the list-items:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ul class="list-inner-border"&gt;
      &lt;li&gt;&lt;span&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span&gt;&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.list-inner-border {
      height: 100px;
  }
  
  .list-inner-border li {
      display: table-cell;
      position: relative; // not having this usually causes the misbehaviour
      width: 1%;
  }
  .list-inner-border li + li:before {
      background-color: red;
      content: '';
      height: 80%;
      left: 0;
      margin-top: 5%;
      position: absolute;
      top: 0;
      width: 1px;
  }
  
  span {
      background-color: gray;
      display: block;
      height:90px;
      margin: 5px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ypXZZ/1/" rel="nofollow noreferrer"><strong>Fiddle</strong></a></p>
  
  <p>The above works in all browsers except Firefox, which behaves as if the container of position:absolute does not have positioning of its own (common oversight with position:absolute):</p>
  
  <p>Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/Ksicy.png" alt="List inner border working in Chrome"></p>
  
  <p>Firefox:</p>
  
  <p><img src="https://i.stack.imgur.com/E0BRe.png" alt="List inner border not working in Firefox"></p>
  
  <p>In Firefox, all the <code>:before</code>s have jumped outside their container and stacked vertically along the edge of the root element.</p>