title: CSS Width:100% not working in Google Chrome
body: <p>I'm trying to build gallery-section with <code>captions</code> based on <code>figure</code> and <code>figcaptions</code>.
  It must be responsive and work with different <code>height</code>/<code>width along with its</code>figcaption`.</p>
  
  <p>Everything works well in <code>firefox</code>, but unfortunately <code>chrome</code> doesn't follow the 100% <code>width</code> in <code>CSS</code> which is significant.</p>
  
  <pre><code>figure {
    margin: 6px;
    color: #333;
    /*display: table;
    float: left;*/
    display: inline-block;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
     box-sizing: border-box ;
  
  }
  figure figcaption {
    background: #E3E3E3;
    padding: 10px 12px 12px;
    color: #333;
    text-align: center;
    font-size: 13px;
    width: 100%;
    display: table-caption;
    caption-side: bottom;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
  }
  </code></pre>
  
  <p>Here's my <a href="http://jsfiddle.net/tm4tjp4c/12" rel="nofollow"><strong>JSFiddle</strong></a></p>
  
  <p>Please help.</p>