title: Firefox vs Chrome: Background overlay is incorrectly sized with display:table-cell
body: <p>I have a block of HTML/CSS that behaves differently in Firefox (22.0) and Chrome (28.0.1500.71).  I'm trying to figure out why.  I have created a jsfiddle so that the resulting output can be easily observed.  <a href="http://jsfiddle.net/treejanitor/Q8zn4/3/" rel="nofollow">http://jsfiddle.net/treejanitor/Q8zn4/3/</a></p>
  
  <p>The source below is attempting to overlay a simple background color upon a table cell with a set of div elements nested under a div with <code>display: table</code>.  Only the table cell which is marked with the playbtn class should have the overlay.</p>
  
  <p>It appears that the <code>table-cell</code> CSS is problematic to Firefox when determining box model dimensions.  For some reason, the <code>top/bottom/left/right</code> CSS attributes are incorrectly using the outermost block, the <code>tbl</code> class' <code>&lt;div&gt;</code>.  This doesn't seem to be an issue with Chrome, Safari, IE9+.</p>
  
  <p>When I changed the CSS display value from <code>table-cell</code> to <code>inline-block</code>, I believe I got the behavior I desired but I did not pursue it much further; I need the <code>display: table-cell</code> in order to properly managed a more complex table display including spacing between the table cells evenly distributed.</p>
  
  <p>Anyone have any ideas?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="tbl"&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;img src="http://placekitten.com/200/240" /&gt;
              &lt;div class="playbtn"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;Description&lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;img src="http://placekitten.com/200/240" /&gt;
              &lt;div class="playbtn"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;Description&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.tbl {
      display: table;
  }
  .tbl &gt; div {
      display: table-row;
  }
  .tbl &gt; div &gt; div {
      position: relative;
      display: table-cell;
      vertical-align: middle;
      padding: 5px;
  }
  div.playbtn {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background: blue;
      background-size: 100%;
      opacity: 0.3;
  }
  </code></pre>