html - CSS Width:100% not working in Google Chrome -

i'm trying build gallery-section captions based on figure , figcaptions. must responsive , work different height/width along itsfigcaption`.

everything works in firefox, unfortunately chrome doesn't follow 100% width in css significant.

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 ; } 

here's jsfiddle

please help.

use display:inline-table figure , remove width:100% figcaption.

here's fiddle working in both chrome , firefox.

figure {     margin: 6px;     color: #333;     display: inline-table;  /*changed inline-table*/     -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 ; }