title: Setting a <button>'s display as table-cell
body: <p>I'm trying to set a <code>button</code>'s <code>display</code> property as <code>table-cell</code> but it doesn't behave like one. </p>
  
  <p>Any help would be appreciated. </p>
  
  <p><a href="http://jsfiddle.net/itay1989/Rhhh7/" rel="noreferrer"><strong>jsFiddle Demo</strong></a> <em>(The demo contains a fixed container height, but I need it to work without it)</em>.</p>
  
  <p><a href="http://jsfiddle.net/itay1989/Rhhh7/5/" rel="noreferrer"><strong>No fixed sizes Demo</strong></a>.</p>
  
  <p><strong>DOM</strong>:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;/div&gt;
      &lt;button class="item"&gt;&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.container {
      border: 5px solid blue;
      display: table;
      table-layout: fixed;
  }
  .item {
      border: 3px solid red;
      display: table-cell;
  }
  </code></pre>
  
  <p>The result:</p>
  
  <p><img src="https://i.stack.imgur.com/1Py7d.png" alt="The result"></p>
  
  <p><strong>Edit:</strong> I need it to work entirely like a table cell, even without fixed sizes.</p>
  
  <p><strong>Note that some solutions seem to work fine on Chrome but don't work on FF</strong>.</p>